JavaScript中的cookie

1.我们为什么要用cookie？
HTTP最大的特点是无连接无状态，使用Cookie和Session的技术就是为了解决这个问题

2.什么是cookie
cookie是当你浏览某个网站的时候，由web服务器存储在你的机器硬盘上的一个小的文本文件。它其中记录了你的用户名、密码、浏览的网页、停留的时间等等信息。当你再次来到这个网站时，web服务器会先看看有没有它上次留下来的cookie。
如果有的话，会读取cookie中的内容，来判断使用者，并送出相应的网页内容，比如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。

3.cookie中都有什么
属性有：

• 键值对
• expires 过期时间
• path 路径
• domain 跨域
• secure 安全性
  encodeURIComponent 编码
  decodeURIComponent 解码

4.cookie的增删改查
添加，直接添加数据：
document.cookie = "key=value;"
删除，通过设置过期时间来让它自动删除：
document.cookie = "key=value;expires="+new Date()
修改，重新设置：
document.cookie = "key=hello;"
查询：
console.log(document.cookie.split(";")[0].split("=")[1])

4.cookie的特性

• 域的限制
• 时间限制
• 空间限制，cookie只能存储4kb
• 数量限制，每个域下最多不能超过50个cookie
• 存储数据类型限制，cookie只能存储字符串

5.cookie与localStorage的区别

• 存储大小
  cookie：一般不超过4k
  sessionStorage：5M甚至更多
  localStorage：5M甚至更多

• 数据有效期
  cookie:一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，如果设置了时间，cookie就会存储在硬盘中，过期失效
  sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除
  localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久删除

• 作用域
  cookie：在所有同源窗口中都是共享的
  sessionStorage：在同一个浏览器窗口是共享的（不同浏览器，即使是统一页面也不共享）
  localStorage：在所有同源窗口中共享

• 通信
  cookie：cookie在浏览器和服务器之间来回传递，如果使用cookie保存过多数据会造成性能问题
  sessionStorage：仅在客户端（浏览器）中保存，不参与服务器的通信
  localStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

• 应用场景
  cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息
  sessionStorage：敏感账号一次性登录，单页面用的较多
  localStorage：用于长期登录，适于长期保存在本地的数据

6.localStorage的方法

• getItem(key) 获取元素
• setItem(key,value) 设置元素
• removeItem(key) 移除元素