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

sessionStorage只在页面打开是起作用,

localStorage关闭页面后仍然起作用。

有时候,我们需要将数据存储到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中存储对象数组并读取

    频繁ajax请求导致页面响应变慢. 于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求. 鉴于localstorage中只能存储字符串,所以我们要借助于JSO ...

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

    http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...

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

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

  4. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  5. sessionStorage和localStorage的区别

    JS的本地保存localStorage.sessionStorage用法总结 localStorage.sessionStorage是Html5的特性,IE7以下浏览器不支持 为什么要掌握localS ...

  6. sessionStorage与localStorage

    客户端存储数据的两个对象为: localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目 ...

  7. sessionStorage 、localStorage

    localStorage和sessionStorage使用时使用相同的API: localStorage.setItem("key","value");//以“ ...

  8. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  9. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

随机推荐

  1. Android drawBitmapMesh扭曲图像

    今天介绍一下在Android当中怎么扭曲图像,在Android系统中的Canvas提供了一个drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshH ...

  2. MapReduce数据流(一)

    在上一篇文章中我们讲解了一个基本的MapReduce作业由那些基本组件组成,从高层来看,所有的组件在一起工作时如下图所示: 图4.4高层MapReduce工作流水线 MapReduce的输入一般来自H ...

  3. public protected default private

    简单来说,如果让一个变量或者方法,只想让自己类中的访问,那么就将它们设置成private 如果你想让一个变量或者方法,本包中的类可以访问,而且子类也可访问,但是包外的缺不想让他访问.就设置成prote ...

  4. 安全增强 Linux (SELinux) 剖析

    架构和实现 Linux® 一直被认为是最安全的操作系统之一,但是通过引入安全增强 Linux(Security-Enhanced Linux,SELinux),National Security Ag ...

  5. oracle 备份和还原还有创建用户、表空间、授权

    --找到存放dbf文件的路径--E:\oracle\product\10.2.0\oradata\orcl--可以通过此语句进行查询select * from v$datafile; --创建表空间c ...

  6. matlab的正则表达式讲解[转]

    引言.啥是正则表达式?正则表达式是干啥的?我理解就和我们在word或者其他编辑软件里点的查找.替换的作用是差不多的,不过功能要强大的多,当然使用起来也稍微复杂一些.书上的定义差不多是这样的:正则表达式 ...

  7. MAT

    http://www.yrom.net/blog/2014/08/29/eclipse-mat/

  8. 算法----序列和的 top N

    Description: 两个长度为 n 的数组 A 和 B, 各从中选出一个元素相加 A[i] + B[j], 求 top n 小的那些和. 思路 1:这样的和总共有 n^2 个, 排序,然后取前 ...

  9. ————————————————————————————杭电ACM————————————————X-POWER————————————————————————————————

    _________________________________________我要成大牛!!!___________________________________________________ ...

  10. PAT (Basic Level) Practise:1002. 写出这个数

    [题目链接] 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式:在一行内输出n的各 ...