前端数据存储:LocalStorage、SessionStorage、Cookie、IndexDB

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fengqiyunluo/article/details/83183617

LocalStorage

localStorage 是一种持久化KV存储方式,一旦存储,除非删除,否则一直存在于浏览器中。
不自动参与http通信

接口:

  • setItem(key, value)
  • removeItem(key)

生命周期:持久,从设置开始到删除为止,一直存在于浏览器中,整个浏览器共享,域名隔离

实现原理:Chrome使用leveldb存储数据.

SessionStorage

是一种临时KV存储解决方案,生命周期由浏览器维护,和通常说的session没有关系。不自动参与http通信

接口:同LocalStorage

生命周期:临时,一个tab的开始到关闭,同一个tab访问不同的网站,sessionStorage是隔离的,但是切换回来,数据一直保存。同源的网页之间的数据是共享的。

Cookie

大小限制4K,可以用来实现session跟踪,在服务器保存session状态。自动参与http通信。

生命周期:浏览器全局共享,域名隔离。

IndexDB

比较低级的存储API,用于存储分布式的。请参考:indexDB http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

总结:

LocalStorage、SessionStorage和Cookie都是通过域名进行隔离的。

全局存储:LocalStorage、Cookie
自动参与HTTP通信:Cookie
实现不同tab保存不同的数据:SessionStorage
存储大量数据:IndexDB

应用:登录相关可以考虑使用Cookie

猜你喜欢

转载自blog.csdn.net/fengqiyunluo/article/details/83183617