前言：最近项目中用到了本地存储和cookie，虽然平时也经常提到，但是在用的时候还是有些模糊，这里做一下总结，以便加深记忆。
本地存储 Web Storage
Web Storage是为了在本地“存储”数据而生，均不会被发送到服务器端。包括了两种存储方式：sessionStorage和localStorage，这两个对象在支持的浏览器中都是以 window 对象属性的形式存在的。
相同点：
1、仅在客户端中保存，不参与和服务器的通信
2、都有同源策略限制，不同浏览器无法共享localStorage或sessionStorage中的信息
3、存储大小均为5M左右
不同点：
1、生命周期
localStoage：是一种永久性存储，除非手动清除。
sessionStorage：会话存储，存储在 sessionStorage 里面的数据在页面会话结束时会被清除，也就是一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
2.作用域
localStorage: 在同一个浏览器内，同源文档（页面属于相同域名和端口）之间，即使是不同页面可以共享 localStorage 数据，可以互相读取、覆盖。
sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了窗口中，也就是说，只有同一浏览器、同一窗口的同源文档才能共享数据。
语法：
sessionStorage或localStorage两种存储方式几乎都有相同的方法和属性。
1.localStorage.length 和 sessionStorage.length : 返回本地存储列表长度;需要说明的是可以通过localStorage对象获取对应的存储数据，比如已经存储了一个键为name的数据，使用localStorage.name获取存储数据；下面的方法都是基于localStorage 对象 或 sessionStorage 对象；
2.getItem( keyName )方法：通过键获取存储的数据；
3.setItem( keyName,value )方法：存储数据，keyName为存储数据的键，value实际要存储的数据（可以把keyName理解成 给要存储的数据起的名字，便于管理）；
4.removeItem( keyName )方法： 将指定键名的数据删除；
5.clear() 方法：清空所有的存储数据；
6.key() 方法： 获取键值，需要注意的是并不能返回指定布尔值需要作进一步处理
cookie
基本概念
1、cookie 确实非常小，它的大小限制为4KB左右。
2、要表示唯一的一个cookie值需要：name、domain、path
3、一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。
4、每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
cookie的使用
document.cookie，通过该方法可以读取、修改、删除cookie。
//读取cookie
var user = document.cookie;
//修改cookie，旧的cookie将被覆盖
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"；
//删除cookie，设置 expires 参数为以前的时间即可，不必指定 cookie 的值
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
三者异同
-
cookie由服务端生成，用于标识用户身份；而两个storage用于浏览器端缓存数据
-
三者都是键值对的集合
-
一般情况下浏览器端不会修改cookie，但会频繁操作两个storage
-
如果保存了cookie的话，http请求中一定会带上；而两个storage可以由脚本选择性的提交
-
会话的storage会在会话结束后销毁；而local的那个会永久保存直到覆盖。cookie会在过期时间之后销毁。
-
安全性方面，cookie中最好不要放置任何明文的东西，两个storage的数据提交后在服务端一定要校验。
网友评论