转: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. Html获取经纬度

    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function success(pos) {alert( ...

  2. 转:Python时间戳和日期的相互转换

    当前时间戳:time.time() 当前日期:time.ctime() 1.Python下日期到时间戳的转换 import datetime import time dateC=datetime.da ...

  3. return, exit, _exit的区别

    return是返回的最常用的方式 _exit属于POSIX定义的系统调用 exit是GLIBC封装之后的函数 1 _exit和exit都会导致整个进程退出,清理进程所占用的资源,但是glibc封装ex ...

  4. 爬虫学习----pattern

    1.match match(string[, pos[, endpos]]) | re.match(pattern, string[, flags]): 这个方法将从string的pos下标处起尝试匹 ...

  5. 对前端mvc的认识和思考

    现在,我们经常都可以看到复杂的JavaScript应用程序,由于这些应用程序变得越来越复杂,一长串的jQuery回调语句或者通过应用程序在 各个状态执行不同的函数调用,这些做法都会变得无法再让人接受, ...

  6. Server.Transfer和Response.Redirect区别

    根本上,Response是叫浏览器去重新转向到指定的网页,而Server自然是发生在服务器端为主了,因此会有以下区别:1. Server.Transfer只能够转跳到本地虚拟目录指定的页面,而Resp ...

  7. [转]慎用slice

    在go中,slice是对固定长度数组的一段切片,其底层是用对数值空间的指针实现的. 在slice的赋值过程中,slice的容量会被初始化成“数组长度 - slice的起点位置”,举例说明: 假设有长度 ...

  8. 重学STM32---(三) 中断分组和优先级

    看了大半天,终于把原子哥的例程中的中断分组和优先级看懂了,勉勉强强知道了怎么设置中断分组和优先级,,不容易啊.下面就是我收集的资料及我的理解 分组不是很难,就是有一点知道就就全部明白了: // 设置N ...

  9. C语言--- 字符串数组 、 预处理器和预处理指令 、 多文件编程 、 结构体

    1 输入一个姓名,判断是否是五虎上将. 1.1 问题 本案例需要使用交互的方式判断:用户从控制台输入一个名字,由程序判断该名字是否在五虎上将的名单中.五虎上将的名单是:GuanYu.ZhangFei. ...

  10. Http权威指南(一)---读书笔记

    Chart1 ====概述==== 最简单的的资源是web服务器文件系统中的静态文件.当然可以上动态,但要经过网关?(不确定) 下面见图: 2.  URI(uniform Resource Ident ...