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类型,建议使用类型强制转换来确保数据格式相同。
例如:
其中storageService是StorageService的实例,包含了read()方法。let cache:Array<Entity> = <Array<Entity>>this.storageService.read('Cache');
如果是从后台获取数据,那就需要特别注意类型的强制转换。
例如:
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;
也可以达到效果。
- TypeScript中LocalStorage存储和读取Array类型
- 在localStorage中存储对象数组并读取
- html5中localStorage存储
- Html使用localStorage存储,读取,删除数据
- localstorage跨域存储读取数据
- H5中localStorage存储信息
- TypeScript类型系统和基础类型
- Web存储-localStorage和sessionStorage
- LocalStorage本地存储和sessionStorage会话存储
- Oracle中读取&&存储blob类型存储的图片(待用)
- 关于本地缓存localstorage与sessionStorage 数组 (array)字符串(string) 对象(object)的存储技巧和注意事项
- 关于本地缓存localstorage与sessionStorage 数组 (array)字符串(string) 对象(object)的存储技巧和注意事项
- Typescript笔记1 安装和基础类型
- html5 动态存储 localStorage.name 和localStorage.setItem()的差别
- 详解numpy中array类型和matrix类型
- 将对象存储在HTML5 localStorage中
- localstorage存储
- LocalStorage存储
- 九度OJ题目1194:八进制
- 数学-poj1006 (中国剩余定理)
- 微信H5支付可以实现在非微信浏览器(如QQ浏览器、谷歌浏览器、Safari等)中使用微信支付的场景。
- (转自一位神牛,收藏起来以后留着看)hdu 1540 Tunnel Warfare(线段树区间合并)
- IT技术学习指导之Linux系统入门的4个阶段
- TypeScript中LocalStorage存储和读取Array类型
- 阿里云ubuntu 16.04 Server配置方案 5 SSh脚本命令免密码登录阿里云
- windows下安装jupyter notebook
- ArrayBlockingQueue详解
- Java:描述反射机制的作用?举几个反射的应用?
- linux入门学习
- [HDU 4739]Zhuge Liang's Mines:状压DP
- 克隆二叉树
- 伸展树(Splay Tree)