LocalStorage

先来几道面试题
一、 a.meituan.com 和 b.meituan.com 这两个域可以共享同一个 localStorage 吗？
二、在 webview 中打开一个页面： i.meituan.com/home.html，点击一个按钮，调用 js 桥打开一个新的 webview：i.meituan.com/list.html，这两个分属不一样 webview的页面能共享同一个 localStorage 吗？
三、若是 localStorage 存满了，再往里存东西，或者要存的东西超过了剩余容量，会发生什么？

好了带着这些问题咱们来往下看

一、基本方法

// 用于存入数据
window.localStorage.setItem('key', 'value');

// 用于读取数据
window.localStorage.getItem('key')

//清除某个键名对应的键值
localStorage.removeItem('key');

// 用于清除全部保存的数据
window.localStorage.clear()

// localStorage.key()接受一个整数做为参数（从零开始），返回该位置对应的键值。
localStorage.key(0)


// Storage 接口储存的数据发生变化时，会触发 storage 事件，能够指定这个事件的监听函数。利用这个能够实现跨tab页通讯
window.addEventListener('storage', onStorageChange);

注意点： localStorage只能存String类型的字符串。存对象的时候会变成 "[object Object]"，由于 ({key:'xxx'}).toString()//"[object Object]"。这个时候咱们能够经过 JSON.stringify()。来帮咱们实现转化。例如： localStorage.setItem('jsonString', JSON.stringify({key: 'mtt'}))

二、做用域

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。这就回答了咱们上面的前二个问题了，
第一题：因为域名不一样，不能进行共享。
第二题：二个webview至关于同一个浏览器的不一样标签页。因此能够共享。

与sessionStorage 、cookie 对比

• localstorage在全部同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
• sessionStorage:不能在不一样的浏览器窗口中共享，即便是同一个页面；
• cookie: 也是在全部同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

三、数据存储有效期

localStorage理论上来讲是永久有效的，即不主动清空的话就不会消失，即便保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错(这里解答了上面的第三题)。但须要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会由于各类缘由（好比说退出App、网络切换、内存不足等缘由）被清空。

与sessionStorage 、cookie 对比

• localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，所以用做持久数据；
• sessionStorage：仅在当前浏览器窗口关闭以前有效；
• cookie：只在设置的cookie过时时间以前有效，即便窗口关闭或浏览器关闭

四、数据存储方面

• sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
• cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下

$ 五、存储数据大小

• cookie数据不能超过4K，同时由于每次http请求都会携带cookie、因此cookie只适合保存很小的数据，如会话标识。
• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大

Web Storage拥有setItem、getItem、removeItem、clear等方法，不像cookie须要本身封装setCookie、getCookie等方法