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

在做  保存选中的复选框记录(跳转到下个页面返回时希望原先选中的东西还在)时, 用到了localStorage存储数据。

由于复选框的内容有点多,就在localStorage中存入了对象(因为考虑到复选框有可能会多选,长度不一定,没有用二维数组)。

//首先先声明了存储复选框的对象checkarr
var checkarr={};

//将数据存入checkarr中
function storeCheckarr(checkname){
     //每列复选框都是一条数组:checkname:[]
     checkarr[checkname]= [];
    $("input[name=‘"+checkname+"‘]:checked").each(function(i){
             checkarr[checkname][i]=$(this).val();
    });
}

//当点击按钮的时候存储数据checkarr到localStorage中
$(".btn-click").click(function(){
    //"xxx"为checkbox中每项的name
    storeCheckarr("xxx");
    storeCheckarr("xxx");
    storeCheckarr("xxx");
    ......
   /*这里是为了防止多次存储的时候,历史的数据对新的数据产生影响,所
   以要移除*/
    localStorage.removeItem("checkarr");
   //JSON.stringify(checkarr)是必须要有的,惨痛的经历告诉我
    localStorage.setItem("checkarr",JSON.stringify(checkarr));

});

读取数据,并且恢复原先选中的状态

//storeflag是返回的时候,页面传来的标识storeflag=1说明此时是返回
if(storeflag==1){
    /*同理读取的时候也要转化,我当时愣是没写这个,一直取不出来数据或者取出来的数据很怪异*/
    checkarr=JSON.parse(localStorage.getItem("checkarr"));
    $.each(checkarr["xxx"],function(i,element){
           $("input[name=‘xxx‘][value="+element+"]").attr("checked",true);
            //这儿的内容可以根据自己的需求写
            ......
    });
}

/*我把这段代码放在$(document).ready中,就是希望页面加载的时候,就能显示出来*/

在别的博客上看到localstorage中只能存储字符串,所以存储和取出时要用到JSON.stringify()和JSON.parse();

如果存取的是单个数据,就没有那么麻烦

var xxx="xxx";
localStorage.setItem("xxx",xxx);

xxx=localStorage.getItem("xxx");

总结:(来自别的博客:http://blog.csdn.net/liuyan19891230/article/details/52638408)

本地存储外,除了localStorage,还有sessionStorage. 
(1)localStorage和sessionStorage都是用来存储客户端临时信息的对象。 
(2)localStorage和sessionStorage都只能存储字符串类型的对象 
(3)localStorage生命周期是永久,除非用户手动清除localStorage信息,否则这些信息将永远存在。 
(4)sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么通过sessionStorage中存储的数据也就被清空了。 
(5)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

时间: 2024-10-25 22:18:24

localStorage存储数组或者对象的问题总结的相关文章

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

http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 12:11)   阅读(708) | 评论(0) 5人收藏此文章, 我要收藏 赞0 慕课网,程序员升职加薪神器,点击免费学习 移动web 有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能

使用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 /*下面我写个

关于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");//获取存

sessionStorage和localStorage存储的转换不了json

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

ElasticSearch入门 第六篇:复合数据类型——数组,对象和嵌套

这是ElasticSearch 2.4 版本系列的第六篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 ElasticSearch入门 第三篇:索引 ElasticSearch入门 第四篇:使用C#添加和更新文档 ElasticSearch入门 第五篇:使用C#查询文档 ElasticSearch入门 第六篇:复合数据类型——数组,对象和嵌套 在ElasticSearch中,使用JSON结构来存储数据,

用数组存对象-更深入理解类与对象

听似挺深奥,难以想象,其实就是将类当成int类型 例如我们存一个整形数组 :int nums[20]; 我们也知道创建一个对象:类名 *class: 所以定义一个的类的数组:类名 * classes[5]; // 定义能存储5个对象的对象数组 下面我创建一个学生类,用它实现以下 #import "Student.h" @implementation Student - (void)setAge:(int)age andName:(char *)name{ _age = age; _na

JNI/NDK开发指南(五)——访问数组(基本类型数组与对象数组)

转载请注明出处:http://blog.csdn.net/xyang81/article/details/42346165 JNI中的数组分为基本类型数组和对象数组,它们的处理方式是不一样的,基本类型数组中的所有元素都是JNI的基本数据类型,可以直接访问.而对象数组中的所有元素是一个类的实例或其它数组的引用,和字符串操作一样,不能直接访问Java传递给JNI层的数组,必须选择合适的JNI函数来访问和设置Java层的数组对象.阅读此文假设你已经了解了JNI与Java数据类型的映射关系,如果还不了解