如何从LocalStorage检索值

本文介绍了如何从LocalStorage检索值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试测试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)); }