http://my.oschina.net/crazymus/blog/371757

使用sessionStorage、localStorage存储数组与对象

发表于3个月前(2015-01-26 12:11)   阅读(708) | 评论(0) 5人收藏此文章, 我要收藏
赞0

慕课网,程序员升职加薪神器,点击免费学习

有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有:

1 缓存数据

2 减少对内存的占用

但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。

1
2
3
4
5
6
7
var obj = { name:'Jim' };
sessionStorage.obj = obj;
localStorage.obj = obj;
 
var arr = [1,2,3];
sessionStorage.obj = arr;
localStorage.obj = arr;

上面的写法都是不能成功的!但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。请看下面的代码。

1
2
3
4
5
6
7
8
9
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
 
//存入
sessionStorage.obj = str;
//读取
str = sessionStorage.obj;
//重新转换为对象
obj = JSON.parse(str);

localStorage也一样,只是和sessionStorage的存储时间不一样。

需要注意的是,JS中的数组本质上也是对象类型,所以上面的代码对数组也是适用的。

使用sessionStorage、localStorage存储数组与对象(转)的更多相关文章

  1. localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  2. 使用sessionStorage、localStorage存储数组与对象

    先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...

  3. sessionStorage、localStorage 存储及如何存储数组与对象

    1.存储,获取,清楚 sessionStorage.setItem("key",val) sessionStorage.getItem("key") sessi ...

  4. localStorage存储数组以及取数组方法

    var weekArray = ['周一'.'周二'.'周三'.'周四'.'周五']; //存: localStorage.setItem('weekDay',JSON.stringify(weekA ...

  5. localStorage 存储 数组

    let str = JSON.stringify(data.list); localStorage.setItem("options",str); let optionss=loc ...

  6. localStorage存储对象,sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  7. localStorage存储JSON对象的小方法

    有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能存储字符串的数据,对于JS中常用的数 ...

  8. sessionStorage和localStorage存储的转换不了json

    先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStora ...

  9. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

随机推荐

  1. CE5 WiFi开关

    WinCE的WiFi开关要依赖于WiFi模块的休眠功能还有模块厂商提供的驱动里面有支持电源管理功能.这里面用的是SDIO86861模块,WinCE5的系统,S3C2416的CPU. 头文件要包括:#i ...

  2. 什么是JavaEE

    Java技术不仅是一门编程语言而且是一个平台.同时Java语言是一门有着特定语法和风格的高级的面向对象的语言,Java平台是Java语言编写的特定应用程序运行的环境.Java平台有很多种,很多的Jav ...

  3. 如何书写高质量的jQuery代码(转)

    想必大家对于jQuery这个最流行的javascript类库都不陌 生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQu ...

  4. 解决wamp的Apache服务器不能重启

    由于工作需要,现在开始研究PHP语言.刚开始搭建服务器环境就困难重重啊.首先看了下配置说明,很复杂很复杂(超级想念Visual Studio).然后问了下群里的老鸟,他们都是安装WAMPServer环 ...

  5. 学习laravel之路由问题 404

    今天配置路由的时候,只有原来的自带路由可用: Route::get('/', function(){    return View::make('hello');}); 再网上搜索了办法:来自:htt ...

  6. jquery 如何遍历json

    var obj = {"status":1,"bkmsg":"\u6210\u529f","bkdata":[" ...

  7. 安全沙箱冲突:Loader.content:XX 不能访问 XX 可以通过调用 Security.allowDomain 来避免此冲突。

    参考资料:http://tieba.baidu.com/p/882855105 感谢:Z0287yyy 感谢分享精神. 具体解决方案:在loader去load的时候,带上这个参数 var contex ...

  8. hpp头文件与h头文件的区别

    hpp,其实质就是将.cpp的实现代码混入.h头文件当中,定义与实现都包含在同一文件,则该类的调用者只需要include该hpp文件即可,无需再将cpp加入到project中进行编译.而实现代码将直接 ...

  9. web.xml 文件配置01

    web.xml 文件配置01   前言:一般的web工程中都会用到web.xml,方便开发web工程.web.xml主要用来配置Filter.Listener.Servlet等.但是要说明的是web. ...

  10. poj 1003 (nyoj 156) Hangover

    点击打开链接 题目大意 就是有很多卡片可以沿着桌边向外放,每次可以伸出1/2,1/3,1/4问最少多少卡片才能让一张完成的卡片悬空,题目输入卡片的宽度,输出卡片个数 #include<stdio ...