TypeScript中LocalStorage存储和读取Array类型

2017/09/25 补充

ES6中提供了将类似数组的对象（Array-like Object）转换成规范的Array类型的方法。

let newArr = Array.from(targetObject);

这里JSON.parse()的问题就是没有将读出来的数据转换成严格的Array类型，使用该方法可以很好的解决这个问题。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

StackOverflow上有关于LocalStorage存储和读取Object类型的方法说明。

http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

这里先提供一下关于存储和读取的通用方法。

写入时注意要使用JSON.stringfy()方法将写入的对象或Array字符串化。

write(key: string, value: any) {
  if (value) {
    value = JSON.stringify(value);
  }
  localStorage.setItem(key, value);
}

读取时，使用JSON.parse()将存储的字符串转为Object或对应Array

read(key: string): T {
  let value: string = localStorage.getItem(key);
  if (value && value != "undefined" && value != "null") {
      return JSON.parse(value);
  }
  return null;
}

需要注意的是，在执行Array赋值时，如果输入的Array对象是any类型，建议使用类型强制转换来确保数据格式相同。

例如：

let cache:Array = >this.storageService.read('Cache');

其中storageService是StorageService的实例，包含了read()方法。

如果是从后台获取数据，那就需要特别注意类型的强制转换。

例如：

this.userService.getList(request).then(data=>{
  let users:Array = [];
  for(let user of data){
    users.push(user);
  }
  this.storageService.write("UserCache",Users);
},()=>this.errorToast());

这里，data是返回的数据，Array类型，我们通过遍历它来执行后续的操作，用Array类型的对象users来接收它。

由于系统不能提前确定data这个Array中Object的类型，所以在分配空间时，一律采用any类型，导致直接将其push进users的操作会失效。

因此一定要对user进行类型的转换，添加，然后再push进users。

当然，直接用

let users:Array = Array data;

也可以达到效果。