- cookie、localStorage、sessionStora
- cookie，localStorage，sessionStora
- Cookie、LocalStorage、SessionStora
- Cookie，localstorage，sessionstora
- cookie localStorage sessionStora
- cookie，localStorage，sessionStora
- Cookie、localStorage、sessionStora
- cookie,localstorage,sessionstora
- cookie、localStorage、sessionStora
- Cookie、localStorage、sessionStora
Cookie
Cookie 的翻译是“小甜饼”，可想而知，Cookie 是一个非常小的数据（4K 左右），主要用来保存用户的登陆信息，这样用户在同一域名下的页面不用再重复登陆了。“记住密码”功能就是保存在了Cookie中。
localStorage
localStorage 是 HTML5 标准新加的技术，用来本地存储数据，它比 Cookie 大的多（5M 左右），除非主动去清除，否则永久保存。当然，如果保存的东西满了，就会报错。localStorage 接替了部分 Cookie 的工作，比如管理购物车。
sessionStorage
sessionStorage 与 localStorage 接口类似，但是数据的生命周期不同。session 的翻译是“会话”，意味着数据只在当前会话中保存着，刷新页面数据依旧存在，但是关闭页面数据就会被清空。应用是：内容特别多的表单，为了用户体验，拆分成多个子页面，每个页面的信息就可以临时保存在 sessionStorage 中了。
三者的异同比较
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可设置失效时间，如果在浏览器中生成，默认是关闭浏览器后失效 | 除非主动清空，否则永久保存 | 仅当前会话下有效，关闭页面或浏览器就会删除 |
| 存放数据大小 | 4K左右 | 5M左右 | 5M左右 |
| 与服务器端的通信 | 每次都会携带在 http 头中， 所以 Cookie 过多，会带来性能问题。 | 仅在客户端（浏览器）中保存，不参与服务器的通信 | 仅在客户端（浏览器）中保存，不参与服务器的通信 |
| 应用 | 记住密码 | 管理购物车 | 临时保存表单信息 |
安全性
数据保存在 Cookie、localStorage、sessionStorage 都要注意 XSS 漏洞的风险。（XSS 漏洞是渲染的文本内有 <script> 标签，浏览器将之解析成 JavaScript 脚本执行 ）
网友评论