localStorage存取对象数组

2019-01-15

前言

localStorage只能存储字符，在需要存储对象或者数组的时候如何存储呢？在这之前，现在了解一下localStorage。
说起localStorage就会想起sessionStorage,那二者有什么区别呢？

#1. 作用域不同

这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

#2. 生存期不同

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。

sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

介绍localStorage

#1.数据结构

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。

举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，“键是唯一的”这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

#2. 域名限制

由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookie的差别还是蛮大的。

#3. 语法

setItem(); 存
getItem(); 取
removeItem(); 移除
clear(); 清除所有

存放数组错误代码:
let arr=[1,2,3];
localStorage.setItem("temp",arr);
console.log(typeof localStorage.getItem("temp")); //string
localStorage.getItem("temp"); //1,2,3

存放对象错误代码：
let obj={"a":1,"b":2};
localStorage.setItem("temp2",obj);
console.log(typeof localStorage.getItem("temp2")); //string
localStorage.getItem("temp"); //[object Object]

正确代码：
let obj={"a":1,"b":2};
obj=JSON.stringify(obj);
localStorage.setItem("temp2",obj);
console.log(typeof localStorage.getItem("temp2")); //string
JSON.parse(localStorage.getItem("temp2")); //{a: 1, b: 2}

参考文章

MDN - Window.localStorage
HTML5 LocalStorage 本地存储