转: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 系统基础

    当系统启动一个组件,它其实就启动了这个程序的进程(如果这个进程还未被启动的话)并实例化这个组件所需要的类. 例如,如果你的程序启动了相机程序里的activity去拍照,这个activity实际上是运行 ...

  2. Linux下备份系统至另一硬盘

    首先会想到dd命令. 但,, 1,若是小硬盘还好,上T的大硬盘这样做肯定不明智; 2,况且dd是在硬件层面的拷贝,前面的MBR也会随之恢复到另一个盘,若源硬盘是100G,目标盘是200G,又会出问题, ...

  3. 《java中局部变量和成员变量的区别》

    class Car { String color; int number; void run() { System.out.println(color+"::"+number); ...

  4. js面向对象(构造函数与继承)

    深入解读JavaScript面向对象编程实践 Mar 9, 2016 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化.多态.和封装几种技术. 对JavaScript而言,其 ...

  5. hdu 2049

    Ps:WA了无限次...简直做到崩溃..高中学的知识都忘了....这道题就是跟2048差不多.. 从N个人里选M个人,有Cmn种选法,然后就是M的错排*Cnm 代码: #include "s ...

  6. (spring-第15回【IoC基础篇】)容器事件

    五个人在报社订阅了报纸.报社一旦有了新报纸,就派员工分别送到这五个人手里.在这个例子中,“报纸”就是事件,“报社”就是广播器,五个订阅者就是监听器.广播器收到事件,把事件传给监听器,监听器对事件做一些 ...

  7. swift简介

    概述 Swift是苹果2014年推出的全新的编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程中不仅保留了ObjC很多语法特性,它也借鉴了多种现代化语言的特点,在 ...

  8. 在VS2010 中兼容Qt4和Qt5

    1,同时安装Qt4和Qt5 Qt_add,然后在 2. 如果之前的项目使用Qt4编写的,如果新添加新的类和ui的话,一定要选择Qt Add_in 1.1.11,不然就无法生成moc文件,随便选择 Ch ...

  9. Design Patterns---- Strategy 模式

    设计模式:可复用面向对象软件的基础 书中对 Strategy 模式的定义如下: 定义了一系列的算法,把它们一个个封装起来,并且使它们可相互替换.本模式使得算法可独立于它的用户而变化. 案例:设计一个商 ...

  10. BZOJ 1690 奶牛的旅行

    分数规划. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm& ...