本地存储(cookie\localStorage\sessionStorage)

1. cookie:

• 始终在同源http中携带(及时不需要)，即在浏览器与服务器之间来回传递，也因此而造成一定的宽带浪费。
• 有保质期，在有效期前一直有效。
• 存储数据不超过4K，适用于会话标记，
• 在同源同窗口中都是共享的，
• 一般也是由后台获取cookie信息，前台主要存储数据。
  前端语法：
  存储：document.cookie = ‘key=value;expires = GMTString;path=/’;
  说明：1.value值需要转码，encodeURIComponent();
  2.保值期需要时GMT格式的时间
  读取：document.cookie
  说明：获取到的是一个字符串cookie值。多个值以‘;’隔开(eg:‘key=value;value’);

2. localStorage:

• 始终有效，即使浏览器关闭了也一直保存，若不需要了，需要手动删除用作持久数据。
• 存储数据可达到5M。
• 在同源同窗口中都是共享的。
  语法：
  存储：localStorage.setItem(key,value);
  读取：localStorage.getItem(key);
  删除一条：localStorage.removeItem(key);
  删除所有:localStorage.clear();
  说明：
  存储时，存储的value必须是字符串形式的数据
  读取时，得到的结果也是字符串

3. sessionStorage:

• 存储数据仅在浏览器关闭之前有效，存储大小了达到5M，在不同的浏览器窗口中不共享，即使是同一个页面。
  语法：
  存储：sessionStorage.setItem(key,value);
  读取：sessionStorage.getItem(key);

4. Web Storage与Cookie相比存在优势：
   • 存储空间更大：个各浏览器间略有不同，但都要比Cookie大很多；
   • 存储的内容只会保存到本地，不会传送到后台，从而导致一定的宽带浪费
   • cookie的存储于获取需要自己处理相关的信息，因为没有封装好的Cookie，需要自己封装。
     而Web Storage有封装好的，使用的时候直接用就好(不需要处理相关信息，
     eg：时间格式啊，value转码啊ect)；
   • 独立的存储空间，每个域(或子域)都有独立的存储空间，而各个存储空间都是相互独立互不干扰的，所以不会造成数据混乱。