LocalStorage：从每个键中获取每个值答案

【问题标题】：LocalStorage: get every value from each keyLocalStorage：从每个键中获取每个值
【发布时间】：2018-03-02 13:47:08
【问题描述】：

我想遍历每个键并从每个键中获取 name 值。这就是我的 LocalStorage 的样子。

键：3 值： {"name":"Kevin","country":"Canada","about":"Test","image":""}

键：4 值： {"name":"Homer","country":"Canada","about":"Test","image":""}

我想获取这两个名称并将它们添加到我的数组中。我用这个方法试了一下：

for(var key in localStorage){
   let user = JSON.parse(localStorage.getItem(key));
   this.users.push(user);
}

我得到的错误是：

SyntaxError: JSON 中位置 1 的意外标记 e

【问题讨论】：

在使用setItem 存储值之前是否使用JSON.stringify？
缺少 name 的开头引号
是的，我是localStorage.setItem(this.getId(), JSON.stringify(value));
您是否在本地存储中存储了多个key # 对象？
显示你从localStorage.getItem(key)得到什么

标签： html angular loops typescript local-storage

【解决方案1】：

当你说我想同时获得这两个名字时，我不明白，但无论哪种方式，你都可以尝试以下方法：

var keys = Object.keys(localStorage);
for(var i=0;i<keys.length;i++){
    var key = keys[i];
    console.log(key, localStorage[key]);
    //store here "both names" where you want them
    //you can also access each element with localStorage[key].name, localStorage[key].country, etc.
}

【讨论】：

【解决方案2】：

我设法解决了它，这是一个简单的错误，总是在循环内初始化一个新的let user。

我将user 移出，其余代码正常工作。

user: any;

  getUsers():void{
    for(var key in localStorage){
      this.user = JSON.parse(localStorage.getItem(key));
      this.users.push(this.user);
    }
  }

【讨论】：

这绝对与 SyntaxError: Unexpected token e in JSON at position 1 无关
这段代码没有意义。有一个名为user 的错误属性引用users 的任意元素当且仅当 getUsers 在某些情况下被调用是糟糕的设计。原始代码中的局部变量声明没有任何问题。如果这解决了您的错误，那么您在其他地方有一个严重的错误。

【解决方案3】：

 var keys = Object.keys(localStorage);
 keys.forEach(key=>{
  var json_str =localStorage.getItem(key)
   try {
       var abc = JSON.parse(json_str);
       this.user = abc;
    } catch (e) {
    console.log(e)
   }
})

【讨论】：

【解决方案4】：

这是对Robert's answer 的改进。

只需枚举localStorage 中具有字符串name 属性的所有值（键本身无关紧要）。然后返回该数组。

根据您自己的回答，您的可变状态可能不一致，因为将临时变量移动到实例范围不会影响您的情况。

function getUsers() {
  return Object.values(localStorage)
    .map(json => {
      try {
        return JSON.parse(json);
      }
      catch (e) {
        return undefined;
      }
    })
    .filter((user?: any): user is {name: string} => user && typeof user.name === 'string');
}

const users = getUsers();

【讨论】：

【解决方案5】：

您可以考虑使用我的库 ngx-store 来处理 Angular 中的 localStorage、sessionStorage、cookie 等。为了实现你想要的，你可以将整个数组存储在存储中，或者只使用下面的代码和你当前的数据结构：

import { LocalStorageService } from 'ngx-store';

export class Example {
  public users: Array<any> = [];

  constructor(public localStorageService: LocalStorageService) {
    this.localStorageService.utility.forEach((value, key) => this.users.push(value));
  }
}

真的，就这么简单;)

【讨论】：

【解决方案6】：

您可以使用方法hasOwnProperty('propertyName') 来检查对象中的名称是否可用。然后执行你想要的操作。

let localStorage = {
    "key1": {"name":"Kevin","country":"Canada","about":"Test","image":""},
    "key2": {"name":"Homer","country":"Canada","about":"Test","image":""}
}
for(let key of Object.keys(localStorage)){
    if(localStorage[key].hasOwnProperty('name')){
        console.log(localStorage[key]['name']);
    }
}

【讨论】：

【解决方案7】：

    const  allItems = []
    const keys = Object.keys(window.localStorage);  // all keys

    keys.forEach(key=> {
      const item = JSON.parse(localStorage.getItem(key) + '');  //item with type Object
      allItems.push(item);
    });
    console.log(allItems) // arry of object

【讨论】：