了解cookie和storage的区别及优缺点

共同点：用于数据的存储。

区别：

1、是否需要添加到http请求头？

HTTP Cookie（cookie）：在客户端存储会话信息，要求服务器对任意HTTP请求发送set-cookie HTTP头作为响应的一部分，包含会话信息。例如set-cookie: name=value。然后浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加cookie HTTP头将信息发送回服务器。如cookie:name=value。

Web Storage：无须将数据发回服务器，仅在本地保存。

2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数

据，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。如果在发送请求时需要携带大量的报文，建议使用storage更好一点

3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

5.路径：Cookie有路径的限制（比如cookie可以写在某个域名下面或者某个路径下面，我们只让/AAA.com生效，而/bbb.com则就会看不到），Storage只存储的域名下（比如你写在www.baidu.com下面，在这个域名下，不管是什么路径都有这个Storage）

 

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie(<=4kb)要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

localStorage.setItem("name", "张三")，sessionStorage.setItem("age", 18);可进行（key，value）的赋值操作

 

cookie的缺点主要集中于安全性和隐私保护

1.cookie可能被禁用。当用户非常注重隐私保护的时候，他会禁用cookie缓存

2.cookie可能会被删除，每个cookie都是硬盘上的一个文件，因此很容易被用户删除

3.cookie安全性不够高，cookie都是以纯文本形式记录在文件中，如果要保存用户名密码等信息的时候，最好事先经过加密处理

在此，为什么封装Storage？

• Storage本身有API,但是只是简单的key/value形式
• Storage只能存储字符串，需要人工转为json对象
• Storage只能一次性清空，不能单个清空（api下）

下面还是看代码吧

/**
 * Storage封装
 */
const  STORAGE_KEY = 'mall'; //设置一个独一无二的key
export default{
  // 存储值
  setItem(key,value,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      val[key] = value;
      this.setItem(module_name, val);
    }else{
      let val = this.getStorage();
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
  },
  // 获取某一个模块下面的属性user下面的userName
  getItem(key,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      if(val) return val[key];
    }
    return this.getStorage()[key];
  },
  getStorage(){
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
  },
  clear(key, module_name){
    let val = this.getStorage();
    if (module_name){
      if (!val[module_name])return;
      delete val[module_name][key];
    }else{
      delete val[key];
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}

总结：如果有哪里写错了，欢迎各位大佬评论区留言指正

参考资料：http://javascript.ruanyifeng.com/bom/webstorage.html

　　　　　https://www.jianshu.com/p/c352d4af4ed3