angular - 如何从 LocalStorage 中检索值
问题描述
我正在尝试测试 html5 localStorage 功能。出于某种原因,每当我在刷新页面后尝试从存储中检索一个值时,我都没有得到任何值。值在我的点击功能上本地存储。但是当我刷新页面时,它不显示值。
src/app.component.ts 文件
>import { Component } from '@angular/core';
>export class MyItems {
>value: string;
>constructor(value:string){
>this.value = value;
> }
>}
>@Component({
>selector: 'my-app',
>templateUrl: './app.component.html',
>styleUrls: [ './app.component.css' ]
>})
>export class AppComponent {
>title = "Working with Angular";
>myItems: MyItems[] = new Array();
>IsForUpdate: boolean = false;
>newItem: any = {};
> updatedItem;
>constructor(){
>this.myItems.push(
>new MyItems("First Value"),
>new MyItems("Second Value"),
>new MyItems("Third Value"),
>new MyItems("Forth Value"),
>new MyItems("Fifth Value")
>);
>localStorage.setItem("Values", JSON.stringify(MyItems));
>var getValues = localStorage.getItem("Values");
>}
>AddItem() {
>this.myItems.push(
> this.newItem
>);
>this.newItem = {};
>localStorage.setItem('dataSource', this.newItem);
>localStorage.getItem('dataSource');
// console.log(localStorage.getItem('dataSource'));
> }
>EditItems(i){
>this.newItem.value = this.myItems[i].value;
>this.updatedItem = i;
>this.IsForUpdate = true;
>}
> UpdateItem(){
>let data = this.updatedItem;
>for(let i=0; i < this.myItems.length; i++){
> if(i == data){
>this.myItems[i].value = this.newItem.value;
>}
> }
>this.IsForUpdate = false;
> this.newItem = {};
>}
>DeleteItem(i) {
>var confirmMe = confirm('Do you want to Delete it ?');
>if(confirmMe == true){
>this.myItems.splice(i, 1);
>} else {
> alert("You cancelled the Operation");
>}
>}
>}
解决方案
如果您尝试在localStorage中存储数组或对象,则需要将其转换为字符串格式,因为 localStorage 仅支持存储字符串值。您可以为此目的使用JSON.stringify()。
localStorage.setItem('Values', JSON.stringify(this.newItem));
localStorage.setItem('dataSource', JSON.stringify(this.items));
同样,当您需要从 localStorage 中检索项目时,可以使用JSON.parse()将其转换回数组或对象。
const storedItems = JSON.parse(localStorage.getItem('dataSource'));
在您的构造函数中,您填充数组的方式过于复杂。填充 myItems 数组后,您可以将其存储在 localStorage 中。
在您的addItem()
方法上,您可以简单地将新项目推送到您的 myItems 数组,然后调用localStorage.setItem()
,这将覆盖存储在您的Values
密钥上的先前值。
myItems: string[] = [];
constructor(){
console.log(JSON.parse(localStorage.getItem('Values')));
this.myItems.push('First Value', 'First Value', 'Third Value', 'Forth Value', 'Fifth Value');
localStorage.setItem('Values', JSON.stringify(this.myItems));
}
addItem() {
const newItem = ''; //replace that with any value you desire
this.myItems.push(newItem)
localStorage.setItem('Values', JSON.stringify(this.myItems));
}
推荐阅读
- c# - 猜谜游戏陷入无限循环
- c# - 使用正常运行的 Crystal Reports 在客户端计算机上成功运行 C# 项目?
- ruby - 在填补空白的同时合并两个数组
- powershell - 即使设置了执行策略,Powershell 也不会运行脚本
- sql-server - HQL中设置两次的表字段在编译的SQL中只出现一次
- r - 合并具有重复标识符的行,同时添加其他列
- php - 用于显示数据库中的 Passers 的查询
- python - Python正则表达式括号匹配不返回正确的子字符串
- java - 使用java在邮件正文内容中获取问号符号
- javascript - 从 javascript 函数获取返回到 html 属性