SessionStorage, LocalStorage, Cookie 这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage,创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)。cookie 数据始终在同源(协议、主机、端口相同)的 http 请求中携带(即使不需要),会在浏览器和服务器间来回传递。
存储大小:
cookie 数据大小不能超过 4 k 。sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
有期时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage
数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,
并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶
级浏览上下文中初始化一个新的会话。
cookie
设置的
cookie
过期时间之前一直有效,即使窗口或浏览器关闭。
作用域:
sessionStorage
只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中
共享。
localStorage
在所有同源窗口中都是共享的。
cookie
在所有同源窗口中都是共享的。
回答:
浏览器端常用的存储技术是
cookie
、
localStorage
和
sessionStorage
。
cookie
其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存
储,然后每次发起同源请求时,发送给服务器端。
cookie
最多能存储
4 k
数据,它的生存时间由 expires
属性指定,并且
cookie
只能被同源的页面访问共享。
sessionStorage
是
html5
提供的一种浏览器本地存储的方法,它借鉴了服务器端
session
的概念,代表的是一次会话中所保存的数据。它一般能够存储
5M
或者更大的数据,它在
当前窗口关闭后就失效了,并且
sessionStorage
只能被同一个窗口的同源页面所访问共享。
localStorage
也是
html5
提供的一种浏览器本地存储的方法,它一般也能够存储
5M
或者
更大的数据。
它和
sessionStorage不同的是,除非手动删除它,否则它不会失效,并且 localStorage
也只能被同源页面所访
问共享。
上面几种方式都是存储少量数据的时候的存储方式,当我们需要在本地存储大量数据的时
候,我们可以使用浏览器的
indexDB
这是浏览器提供的一种本地的数据库存储机制。
它不是关系型数据库,它内部采用对象仓库的形式存储数据,它更接近 NoSQL
数据库。
传送门 indexDB介绍(http://www.ruanyifeng.com/blog/2018/07/indexeddb.html)
(完结,请给个点赞吧)
我的小程序,欢迎大家友好访问,谢谢