TypeScript中LocalStorage存储和读取Array类型

来源：互联网发布：类似易企秀的软件编辑：程序博客网时间：2024/06/16 07:19

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<T>(key: string): T {  let value: string = localStorage.getItem(key);  if (value && value != "undefined" && value != "null") {      return <T>JSON.parse(value);  }  return null;}

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

例如：

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

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

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

例如：

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

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

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

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

当然，直接用

let users:Array<UserEntity> = Array<UserEntity> data;

也可以达到效果。

0 0