前端的本地存储不可不知了

cookie

1. 做用：

• cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，咱们就能够经过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（一般通过加密）。

2. 特征：

• 不一样的浏览器存放的cookie位置不同，也是不能通用的。cookie的存储是以域名形式进行区分的，不一样的域下存储的cookie是独立的。咱们能够设置cookie生效的域（当前设置cookie所在域的子域），也就是说，咱们可以操做的cookie是当前域以及当前域下的全部子域一个域名下存放的cookie的个数是有限制的，不一样的浏览器存放的个数不同,通常为20个。每一个cookie存放的内容大小也是有限制的，不一样的浏览器存放大小不同，通常为4KB。cookie也能够设置过时的时间，默认是会话结束的时候，当时间到期自动销毁

3. cookie值既能够设置，也能够读取：

• 1.客户端设置
• document.cookie ='名字=值';document.cookie ='username=cfangxu;domain=baike.baidu.com'
• 2. 服务器端设置
• 无论你是请求一个资源文件（如 html/js/css/图片），仍是发送一个ajax请求，服务端都会返回response。而response header中有一项叫set-cookie，是服务端专门用来设置cookie的。
• 3. 读取咱们经过document.cookie来获取当前网站下的cookie的时候，获得的字符串形式的值，它包含了当前网站下全部的cookie（为避免跨域脚本(xss)攻击，这个方法只能获取非 HttpOnly 类型的cookie）。它会把全部的cookie经过一个分号+空格的形式串联起来，例如username=chenfangxu; job=coding修改 cookie要想修改一个cookie，只须要从新赋值就行，旧的值会被新的值覆盖。

4. cookie的属性：

• 通常设置天数：new Date().setDate( oDate.getDate() + 5 ); 比当前时间多5天。

localStorage（本地存储）

1. 特色：

• HTML5新方法，不过IE8及以上浏览器都兼容。
• 生命周期：持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。
• 存储的信息在同一域中是共享的。
• 当本页操做（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,可是别的页面会触发storage事件。

2. 大小：

• 通常是5M（跟浏览器厂商有关系）。在非IE下的浏览中能够本地打开。IE浏览器要在服务器中打开。

3. 设置：

• localStorage本质上是对字符串的读取，若是存储内容多的话会消耗内存空间，会致使页面变卡localStorage受同源策略的限制设置localStorage.setItem('username','cfangxu');

4. 获取：

• localStorage.getItem('username') 也能够获取键名 localStorage.key(0)

5. 删除：

• 获取第一个键名删除localStorage.removeItem('username')
• 也能够一次性清除全部存储localStorage.clear()

sessionStorage

1. 特色：

• 与localStorage相似，也是本地存储，是会话本地存储。用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另外一个页面，sessionStorage也是没有的。

cookie、localStorage、sessionStorage的区别

1. 相同：
2. 在本地（浏览器端）存储数据。
3. 不一样：
4. localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
   
5. sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
   
6. localStorage是永久存储，除非手动删除。sessionStorage当会话结束（当前页面关闭的时候，自动销毁）cookie的数据会在每一次发送http请求的时候，同时发送给服务器,而localStorage、sessionStorage不会。