cookies,sessionStorage,localStorage 的区别？-一一网

sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

应该注意，存储在sessionStorage或localStorage中的数据特定于页面的协议。也就
是说example.com 与 example.com的sessionStorage相互隔离。

被存储的键值对总是以UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。

localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。
另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

Cookie

Cookie 就是访问者在访问网站后留下的一个信息片段。

Cookie 用于个性化用户的体验。可能包含用户在访问网站时的参数或输入。用户可以自定义浏览器来接受，拒绝或删除 Cookie

Cookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。

这个首部可能会被完全移除，例如在浏览器的隐私设置里面设置为禁用cookie。

SessionStorage, LocalStorage, Cookie

三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建它们的目的便于客户端存储数据。而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。

SessionStorage, LocalStorage, Cookie区别？

存储方式	作用与特性	存储数量及大小	api
sessionStorage	1. 存储客户端数据，无需请求服务器；2. 数据会在页面会话期间一直保存，关闭浏览器，关闭页面，跳转页面等数据都会消失	5M左右各浏览器的存储有些差异	// 保存数据 sessionStorage.setItem(‘key’, ‘value’); // 获取数据 let data = sessionStorage.getItem(‘key’); // 删除保存的数据 sessionStorage.removeItem(‘key’); // 删除所有保存数据 sessionStorage.clear();
localStorage	1. 存储客户端数据，无需请求服务器；2. 数据永久保存，除非手动删除，可自行封装一个方法，设置失效时间。	同sessionStorage	// 保存数据 localStorage.setItem(‘key’, ‘value’); // 获取数据 let data = localStorage.getItem(‘key’); // 删除保存的数据 localStorage.removeItem(‘key’); // 删除所有保存数据 localStorage.clear();
Cookie	1. 存储用户信息，获取数据要与服务器建立链接；2.可存储数据有限，依赖服务器，无需请求服务器的数据不要放在cookie中，以免影响页面性能，3.可设置过期时间。	存储大小控制在4095B以内，超出的数据会被忽略，IE6或更低版本最多存20个cookie； IE7及以上版本最多可以有50个；Firefox最多50个；chrome和Safari没有做硬性限制	原生