# cookie,LocalStorage,sessionStorage ## 1.Cookie Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为[4KB](http://www.chengbenchao.top/javascript/854981)左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有[保存登录信息](http://www.chengbenchao.top/javascript/854981)，比如你登录某个网站市场可以看到“记住密码”; ## 2.localStorage localStorage 是 HTML5 标准中新加入的技术,特点:[除非被清除,否则永久保存](http://www.chengbenchao.top/javascript/854981)。一般大小在[5MB](http://www.chengbenchao.top/javascript/854981); ## 3.sessionStorage sessionStorage 是HTML5新增的一个[会话存储对象](http://www.chengbenchao.top/javascript/854981)，用于[临时保存](http://www.chengbenchao.top/javascript/854981)同一窗口(或标签页)的数据，刷新页面数据依旧存在，在[关闭窗口或标签页之后](http://www.chengbenchao.top/javascript/854981)将会删除这些数据 | 特性 | Cookie | localStorage | sessionStorage | | --- | --- | --- | --- | | 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 | | 存放数据大小 | 4K左右 | 一般为5MB | | | 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | | | 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | **localStorage**用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的 **sessionStorage**不是一种持久化的本地存储，仅仅是会话级别的存储,页面关闭就清空; 使用 localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem,clear; ~~~ /* 设置 */ sessionStorage.setItem("key", "session"); sessionStorage.setItem("a","hello") localStorage.setItem("site", "local"); /* 获取 */ var key = sessionStorage.getItem("key"); var site = localStorage.getItem("site"); /* 移除 */ sessionStorage.removeItem("key"); localStorage.removeItem("site"); /* 清空 */ sessionStorage.clear(); localStorage.clear(); ~~~