LocalStorage

先来几道面试题
1、a.meituan.comb.meituan.com 这两个域能够共享同一个 localStorage 吗?
2、在 webview 中打开一个页面:i.meituan.com/home.html,点击一个按钮,调用 js 桥打开一个新的 webview:i.meituan.com/list.html,这两个分属不同webview的页面能共享同一个 localStorage 吗?
3、如果 localStorage 存满了,再往里存东西,或者要存的东西超过了剩余容量,会发生什么?

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

1、基本方法

// 用于存入数据
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'}))

2、作用域

localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据。这就回答了我们上面的前二个问题了,
第一题:由于域名不同,不能进行共享。
第二题:二个webview相当于同一个浏览器的不同标签页。所以可以共享。

sessionStorage cookie 对比

  • localstorage在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在
  • sessionStorage:不能在不同的浏览器窗口中共享,即使是同一个页面;
  • cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在

3、数据存储有效期

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

sessionStorage cookie 对比

  • localStorage:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据;
  • sessionStorage:仅在当前浏览器窗口关闭之前有效;
  • cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭

4、数据存储方面

  • sessionStoragelocalStorage不会自动把数据发送给服务器,仅在本地保存
  • cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下

$ 5、存储数据大小

  • cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。
  • sessionStoragelocalStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
Web Storage拥有setItem、getItem、removeItem、clear等方法,不像cookie需要自己封装setCookie、getCookie等方法
阅读 3.4k

推荐阅读
前端小将
用户专栏

系统的介绍前端知识

1256 人关注
21 篇文章
专栏主页