• localStorage存储JSON对象的小方法


    有时候,我们需要将数据存储到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中的数组本质上也是对象类型,所以上面的代码对数组也是适用的。

    利用localStorage可以简单的存储一些JSON对象,可以方便简易应用的数据存储。

      简单介绍下localStorage,localStorage是html5提供的一种本地存储的方法,可以把数据存储在本地浏览器,下次打开后仍然可以获取到存储的数据,如果在存储的数据 量小的时候可以起到代替数据库的功能,比cookies更有优越性。

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量
     
     localStorage.key = "value"//存储变量名为key,值为value的变量
     
     localStorage.getItem("key");//获取存储的变量key的值www.it165.net
     
     localStorage.key;//获取存储的变量key的值
     
     localStorage.removeItem("key")//删除变量名为key的存储变量

    以上即为localStorage调用的方法。下面介绍存储JSON对象的方法。

    var students = 
     {
     liyang:{name:"liyang",age:17},
     
     lilei:{name:"lilei",age:18}
     
     }//要存储的JSON对象
     
     
     students = JSON.stringify(students);//将JSON对象转化成字符串
     
     localStorage.setItem("students",students);//用localStorage保存转化好的的字符串
     

    上面即可保存JSON对象,接下来我们在要使用的时候再将存储好的students变量取回

    var students = localStorage.getItem("students");//取回students变量

    students = JSON.parse(students);//把字符串转换成JSON对象

    以上即可得到存储的students的JSON对象了

  • 相关阅读:
    hdu5834 Magic boy Bi Luo with his excited tree 【树形dp】
    POJ2152 Fire 【树形dp】
    POJ1848 Tree 【树形dp】
    hdu3586 Information Disturbing 【树形dp】
    BZOJ4557 [JLoi2016]侦察守卫 【树形dp】
    BZOJ4000 [TJOI2015]棋盘 【状压dp + 矩阵优化】
    BZOJ1487 [HNOI2009]无归岛 【仙人掌dp】
    BZOJ4002 [JLOI2015]有意义的字符串 【数学 + 矩乘】
    洛谷P3832 [NOI2017]蚯蚓排队 【链表 + 字符串hash】
    3-3 银行业务队列简单模拟
  • 原文地址:https://www.cnblogs.com/facial/p/5577924.html
Copyright © 2020-2023  润新知