Cookie,localStorage,sessionStorage三者区别?
cookie
是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)- cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递
sessionStorage
和localStorage
不会自动把数据发给服务器,仅在本地保存- 存储大小:
cookie
数据大小不能超过4ksessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多,可以达到5M或更大
- 有期时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据sessionStorage
数据在当前浏览器窗口关闭后自动删除cookie
设置的cookie
过期时间之前一直有效,即使窗口或浏览器关闭
为什么要封装Storage,本身不是已经有API?
-
Storage本身有API,但是只是简单的key、value形式
-
Storage只存储字符串,需要人工转成json对象
-
Storage只能一次性清空,不能单个清空
// Storage封装 const STORAGE_KEY = 'mall' export default { setItem (key, value, moduleName) { if (moduleName) { const val = this.getItem(moduleName) val[key] = value this.setItem(moduleName, val) } else { const val = this.getStorage() val[key] = value window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)) } }, // 获取某一个模块下面的属性user下面的userName getItem (key, moduleName) { if (moduleName) { const val = this.getItem(moduleName) if (val) return val[key] } return this.getStorage()[key] }, getStorage () { return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || {}) }, clear (key, moduleName) { const val = this.getStorage() if (moduleName) { if (val[moduleName]) return delete val[moduleName][key] } else { delete val[key] } window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)) } }