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

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

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

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

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

移动web

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

1 缓存数据

2 减少对内存的占用

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

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中就可以了。请看下面的代码。

var obj = { name:‘Jim‘ };

var str = JSON.stringify(obj);

//存入

sessionStorage.obj = str;

//读取

str = sessionStorage.obj;

//重新转换为对象

obj = JSON.parse(str);

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

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

时间： 2024-08-03 19:10:25

使用sessionStorage、localStorage存储数组与对象（转）的相关文章

localStorage存储数组或者对象的问题总结

在做保存选中的复选框记录(跳转到下个页面返回时希望原先选中的东西还在)时, 用到了localStorage存储数据. 由于复选框的内容有点多,就在localStorage中存入了对象(因为考虑到复选框有可能会多选,长度不一定,没有用二维数组). //首先先声明了存储复选框的对象checkarr var checkarr={}; //将数据存入checkarr中 function storeCheckarr(checkname){ //每列复选框都是一条数组:checkname:[] chec

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

有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用但是,storage只能存储字符串的数据,对于JS中常用的数据或对象却不能直接存储. var obj = { name:'Jim' }; sessionStorage.obj = obj; localStorage.obj = obj; var arr = [1,2,3]; sessionStorage.obj = arr; localStorage.obj

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

1.存储,获取,清楚 sessionStorage.setItem("key",val) sessionStorage.getItem("key") sessionStorage.removeItem("key") 2.存数组 var aa=[1,2,3]; var sStorage=window.sessionStorage; sStorage.aa=aa; console.log(sStorage.aa); //输出1,2,3 /*下面我写个

sessionStorage和localStorage存储的转换不了json

先说说localStorage与sessionStorage的差别 sessionStorage是存储浏览器的暂时性的数据,当关闭浏览器下次再打开的时候就不能拿到之前存储的缓存了 localStorage是存储浏览器的永久数据,只要不去自己清除数据,你下次打开时依然可以拿到浏览器存储的数据这里要说的是存储缓存和拿到缓存的坑: 图片可以看到我用localStorag.getItem拿到之前存储的数组,对象,但是拿过来过后不用json转换的话依然是两个object,object, 用json转换就

Web存储机制—sessionStorage,localStorage使用方法

Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在这两种机制是通过Window.se

h5的本地存储——sessionStorage,localStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,localStorage和sessionStorage都是本地存储. Cookie会在每次发送HTTP请求时附加到Cookie头字段,服务器以此得知用户所处的状态. Web Storage的概念和cookie相似,

关于localstorage存储JSON对象的问题

如果你尝试用LocalStorage存储Object,却意外发现取出来以后不是你想要的,例如: 存储一个对象,并将对象的name属性的值给P标签. HTML: <p></p> JS: var fruit={ name:'apple', color:'red', taste:'sweet' } localStorage.myfruit=fruit; console.log(localStorage.myfruit); document.getElementsByTagName('p'

localstorage存储对象

之前在客户端存储数据一直用的是cookie,由于有大小等限制,随着html5时代的到来,现在大多数用的是localstorage存储数据: 例如: localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = "value"//存储变量名为key,值为value的变量 localStorage.getItem("key");//获取存

H5的storage(sessionstorage&localStorage)简单存储删除

众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同下面直接上代码,storage中的存储与删除: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=devic