我正在尝试测试html5 localStorage功能.出于某种原因,每当刷新页面后尝试从存储中检索值时,我都不会得到任何值.我的点击功能将值存储在本地.但是,当我刷新页面时,它不显示值.
I'm trying to test out html5 localStorage feature. For some reason, whenever I try to retrieve a value from storage after refreshing the page, i dont get any value. Values are getting stored locally on my click functionality. But when i refresh the page, it doesnt show the values.
src/appponent.ts文件
>import { Component } from '@angular/core'; >export class MyItems { >value: string; >constructor(value:string){ >this.value = value; > } >} >@Component({ >selector: 'my-app', >templateUrl: './appponent.html', >styleUrls: [ './appponent.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()为此.
If you are trying to store arrays or objects in localStorage, you will need to convert it into a string format, as localStorage only supports the storing of string values. You can use JSON.stringify() for that purpose.
localStorage.setItem('Values', JSON.stringify(this.newItem)); localStorage.setItem('dataSource', JSON.stringify(this.items));同样,当您需要从localStorage检索项目时,可以使用 JSON.parse()将其转换回数组或对象.
Likewise, when you need to retrieve the item from localStorage, you can use JSON.parse() to convert it back into an array or object.
const storedItems = JSON.parse(localStorage.getItem('dataSource'));
在构造函数上,您使填充数组的方法过于复杂.填充myItems数组后,可以将其存储在localStorage中.
On your constructor, you are overcomplicating the way you populate your array. After populating the myItems array, you can store it in your localStorage.
在addItem()方法上,您可以简单地将新项目推入myItems数组,然后调用localStorage.setItem(),这将覆盖存储在Values键上的先前值.
On your addItem() method, you can simply push the new items to your myItems array, and call localStorage.setItem(), which will overwrite the previous value stored on your Values key.
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)); }更多推荐
如何从LocalStorage检索值
发布评论