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
原创粉丝点击