cookie、sessionStorage、localStorage区别

随着互联网的快速发展，基于网页的应用愈来愈广泛，同时也变的愈来愈复杂，为了知足各类各样的需求，会常常性在本地存储大量的数据，传统方式咱们以document.cookie来进行存储的，可是因为其存储大小只有4k左右，而且解析也至关的复杂，每一次发送请求都会携带上cookie，会形成带宽的浪费，给开发带来诸多不便，HTML5规范则提出解决方案。 web存储的含义是将数据存储到用户的电脑上，这样能够缓解服务器的压力，而且提升体验 ####特性 一、设置、读取方便 二、容量较大，sessionStorage约5M、localStorage约20M 三、只能存储字符串，能够将对象JSON.stringify() 编码后存储 ####window.sessionStorage 一、生命周期为关闭当前页面窗口 二、不能多窗口下数据能够共享 （同源策略，百度家的local阿里他们家是拿不到） 补充：经过跳转能够 运用场景： 页面跳转的时候能够经过session实现数据共享 在一些单页面（spa）的运用中，进行页面传值的时候比较有用 ####window.localStorage 一、永久生效，除非手动删除或用代码删除 二、能够多窗口共享（同源策略） 运用场景：一些不涉及到安全的一些数据（不要太过庞大）均可以存储到本地 ####方法详解 setItem(key, value)设置存储内容

getItem(key)读取存储内容

removeItem(key)删除键值为 key 的存储内容

clear()清空全部存储内容

key(n) 以索引值来获取 键名

length  存储的数据的个数

区别： cookie数据始终在同源的http请求中携带（即便不须要），即 cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带 cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。做用域不一样，sessionStorage不能在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

差别性：（面试常常问）
相同点：都是存储数据，存储在web端，而且都是同源
不一样点：
（1）cookie 只有4K 小 而且每一次请求都会带上cookie 体验很差，浪费带宽
（2）session和local直接存储在本地，请求不会携带，而且容量比cookie要大的多
（3）session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过时时间
（4）cookie 和local均可以支持多窗口共享，而session不支持多窗口共享 可是都支持a连接跳转的新窗口
复制代码