关于本地缓存localstorage与sessionStorage 数组 （array）字符串（string） 对象（object）的存储技巧和注意事项

于 2017-11-06 11:10:33 发布
阅读量477 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherry_zhang18/article/details/78455705
版权
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>本地缓存</title>  
  5. </head>  
  6. <body>  
  7.   
  8. </body>  
  9.     <script type="text/javascript">  
  10.     //储存一个数组到本地缓存数组  
  11.     var a = [1,2,3]  
  12.     console.log(typeof a)  //object  
  13.     //储存  
  14.     sessionStorage.setItem("sa",a);  
  15.     //取出  并用a1接收这个值  
  16.     var a1 = sessionStorage.getItem("sa")  
  17.   
  18.     //打印a1的数据类型  
  19.     console.log( typeof a1);//结果为string  
  20.   
  21.   
  22.     //取出来不能当做数组用，必须得把字符串转换成数组  
  23.     console.log(a1.split(",")) //  ["1", "2", "3"] 转换为“,”隔开的数组,其数组元素还是字符串，  
  24.                                 //用之前先转换为Number类型,-0或者*1即可转换为Number类型  
  25.       
  26.     // console.log(JSON.parse(a1))  //这一行就会报错  因为a1本来就不是json串类型的数据，  
  27.     //他只能转换JSon串类型的数据  
  28.   
  29.     //若储存前先转换为json串类型  
  30.     var b = [1,2,3]  
  31.   
  32.     //转换为Json串  
  33.     var b1 = JSON.stringify(b);   
  34.     sessionStorage.setItem("sb",b1);  
  35.   
  36.     var b2 = sessionStorage.getItem("sb");  
  37.   
  38.     console.log( typeof b2) //string   
  39.     console.log( typeof JSON.parse(b2)) // object  
  40.     console.log( typeof JSON.parse(b2)[2])  //number  
  41.     console.log(  JSON.parse(b2)) //[1,2,3]  
  42.     console.log(JSON.parse(b2)[1])  //数组的第二个元素2  
  43.   
  44.     //总结 1、 存储前转换为json串的形式，取出后转换为json对象形式可以当做数组直接用；  
  45.     //     2、无论存储前是什么数据类型  取出来之后他都会是一个字符串（string）类型  
  46.     //     3、存储字符串时，取出来就直接可以用。  
  47.     //     4、特别注意，当你存储一个对象的时候，必须先转换为json串存储，不然对象就没法用了  
  48.       
  49.   
  50.   
  51.     //看下面的demo  
  52.     var c = {  
  53.         name:"name",  
  54.         age:18,  
  55.         love:"美女"  
  56.     }  
  57.   
  58.     sessionStorage.setItem("sc",c);  
  59.   
  60.     var c1 = sessionStorage.getItem("sc");  
  61.   
  62.     console.log(typeof c1)  //string  
  63.   
  64.     console.log(c1) // [object object]  
  65.     console.log(c1.anme) //undefined  
  66.   
  67.     //是不是要转换为json对象  我们试试  
  68.     // var c2 = JSON.parse(c1);   //直接报错    继续向下看  
  69.       
  70.     //存储前转换为json串  
  71.   
  72.     var d = {  
  73.         name:"name",  
  74.         age:18,  
  75.         love:"美女"  
  76.     }  
  77.   
  78.     var e = JSON.stringify(d)  
  79.     sessionStorage.setItem("sd",e);  
  80.   
  81.     var d1 = sessionStorage.getItem("sd");  
  82.   
  83.     console.log(typeof d1)  //string  
  84.   
  85.     console.log(d1) // {"name":"name","age":18,"love":"美女"}  
  86.     console.log(d1.anme) //undefined  
  87.   
  88.     var f = JSON.parse(d1)  
  89.     console.log(f)  //Object {name: "name", age: 18, love: "美女"}  
  90.     console.log(f.age) //18  
  91.   
  92.     </script>  
  93. </html>  
康康不是只喵
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值