内容简介:先来几道面试题1、2、在
先来几道面试题
1、 a.meituan.com
和 b.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、数据存储方面
-
sessionStorage
和localStorage
不会自动把数据发送给服务器,仅在 本地保存 。 -
cookie
数据始终在同源的http
请求中携带(即使不需要),即cookie
在浏览器和服务器间来回传递。cookie
数据还有路径(path)
的概念,可以限制cookie
只属于某个路径下
$ 5、存储数据大小
-
cookie
数据不能超过4K
,同时因为每次http
请求都会携带cookie
、所以cookie
只适合保存很小的数据,如会话标识。 -
sessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多,可以达到5M或更大
Web Storage拥有setItem、getItem、removeItem、clear等方法,不像cookie需要自己封装setCookie、getCookie等方法
以上所述就是小编给大家介绍的《LocalStorage》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- localStorage 使用指南-你所不知道的 localStorage
- LocalStorage
- H5 localStorage 缓存图片
- localStorage 和 sessionStorage 简介
- 简单封装localStorage和sessionStorage
- H5 本地缓存localStorage缓存机制
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。