Web Storage 与 Cookie 的深度对比：特性、局限与封装实践

Storage 的概念与 Cookie 相似，但核心区别在于 Storage 专为大容量存储设计。Cookie 的大小受到严格限制，且每次请求新页面时都会自动发送至服务器，这无形中浪费了带宽。此外，Cookie 需要指定特定的作用域，无法跨域调用。Cookie 主要用于与服务器进行交互，作为 HTTP 规范的一部分存在；而 Web Storage 则是为了本地数据存储而诞生的技术。

Cookie

Cookie 的优点：具有极高的扩展性和可用性

1. 可以控制保存在 Cookie 中的 Session 对象的大小。

2. 通过加密和安全传输技术，降低 Cookie 被破解的风险。

3. 可以控制 Cookie 的生命周期，赋予其时效性。

Cookie 的缺点：

1. Cookie 的长度和数量受到限制。最多只能存储 20 条 Cookie，且每条 Cookie 的长度不能超过 4KB。超出部分将被截断至 4KB。

2. Cookie 可能被用户禁用或删除。

3. 存在安全性问题。Cookie 的安全性较低，以纯文本形式记录在文件中。若需保存用户名、密码等敏感信息，建议先进行加密处理。一旦 Cookie 被拦截，攻击者即可获取所有 Session 信息。

在 HTML5 中，Web Storage 包括两种存储方式：SessionStorage 和 LocalStorage。

LocalStorage 优点：

LocalStorage 解决了 Cookie 存储空间过小的问题。相比 Cookie 仅 4KB 的存储限制，LocalStorage 的存储空间提升至 5MB，相当于一个前端数据库。

Storage 存储的格式为键值对（Key-Value）格式。浏览器会将所有 Storage 的值类型限定为 String 类型，因此在使用时需要进行相应的类型转换。

LocalStorage 缺点

低版本的 IE 浏览器不支持 Storage。此外，Storage 存储数据占用空间过大会影响性能，导致页面卡顿。Storage 中的数据不会被搜索引擎的爬虫抓取。

LocalStorage 与 SessionStorage 的区别： LocalStorage 的存储是永久性的，仅在手动删除或浏览器被卸载后才会清除。 SessionStorage 的存储仅保存同一窗口或标签页的数据，当窗口或页面关闭后数据会被清除。

Cookie、LocalStorage 和 SessionStorage 的比较

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

区别：

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

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

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

2. 存储大小限制不同，Cookie 数据不能超过 4KB。同时，由于每次 HTTP 请求都会携带 Cookie，因此 Cookie 仅适合保存极少量的数据。

SessionStorage 和 LocalStorage 虽然也有存储大小的限制，但比 Cookie 大得多，可达 5MB 或更大。如果在发送请求时需要携带大量报文，建议使用 Storage 更为合适。

3. 数据有效期不同。SessionStorage：仅在当前浏览器窗口关闭前有效，因此不可能持久保持；LocalStorage：始终有效，即使窗口或浏览器关闭也继续保存，适用于持久数据；Cookie 仅在设置的 Cookie 过期时间之前有效，即使窗口或浏览器关闭也是如此。

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

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

Web Storage 存在不少的优势

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

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

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

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

封装 Storage

为什么封装 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));
  }
}