《现代JavaScript高级教程》详解Cookie, Session, SessionStorage, LocalStorage

逃离我推掉我的手 2023-10-13 12:23 8阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

## 详解Cookie, Session, SessionStorage, LocalStorage ##

### 引言 ###

在Web开发中，数据的存储和管理是非常重要的。Cookie、Session、SessionStorage和LocalStorage是常见的Web存储解决方案。本文将详细介绍这些概念，比较它们的特点和用法，并提供相关的代码示例。

### 1. 什么是Cookie？ ###

#### 属性 ####

Cookie是一种在客户端存储数据的机制，它将数据以键值对的形式存储在用户的浏览器中。Cookie具有以下属性：

*  **名称和值**：每个Cookie都有一个名称和对应的值，以键值对的形式表示。
 *  **域（Domain）**：Cookie的域属性指定了可以访问Cookie的域名。默认情况下，Cookie的域属性设置为创建Cookie的页面的域名。
 *  **路径（Path）**：Cookie的路径属性指定了可以访问Cookie的路径。默认情况下，Cookie的路径属性设置为创建Cookie的页面的路径。
 *  **过期时间（Expires/Max-Age）**：Cookie的过期时间属性指定了Cookie的有效期限。可以通过设置`Expires`或`Max-Age`属性来定义过期时间。过期时间可以是一个具体的日期和时间，也可以是一个从当前时间开始的时间段。
 *  **安全标志（Secure）**：Cookie的安全标志属性指定了是否只在通过HTTPS协议发送请求时才发送Cookie。
 *  **同站点标志（SameSite）**：Cookie的同站点标志属性指定了是否限制Cookie只能在同一站点发送。可以设置为`Strict`（仅允许来自当前站点的请求携带Cookie）或`Lax`（允许部分跨站点请求携带Cookie）。

#### 应用场景 ####

Cookie在Web开发中有多种应用场景，包括：

*  **会话管理**：Cookie常用于存储会话标识符，以便在用户访问不同页面时保持会话状态。
 *  **身份验证**：Cookie可以用于存储用户的身份验证凭证或令牌，以便在用户下次访问时自动登录。
 *  **个性化设置**：Cookie可以用于存储用户的个性化首选项，例如语言偏好、主题设置等。
 *  **追踪和分析**：Cookie可以

用于追踪用户的行为和进行网站分析，例如记录用户访问的页面、点击的链接等。

以下是一个使用JavaScript创建和读取Cookie的示例：

// 设置Cookie
    document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/; secure; SameSite=Strict";
    
    // 读取Cookie
    const cookies = document.cookie.split("; ");
    for (let i = 0; i < cookies.length; i++) {
        
      const cookie = cookies[i].split("=");
      const name = cookie[0];
      const value = cookie[1];
      console.log(name + ": " + value);
    }

### 2. 什么是Session？ ###

#### 属性 ####

Session是一种在服务器端存储和跟踪用户会话状态的机制。Session具有以下属性：

*  **存储位置**：Session数据存储在服务器端的内存或持久化介质中，而不是存储在客户端。
 *  **会话ID**：每个会话都有一个唯一的会话ID，用于标识该会话。会话ID通常通过Cookie或URL参数发送给客户端，并在后续请求中用于识别会话。
 *  **过期时间**：Session可以设置过期时间，以控制会话的有效期。过期时间可以是一个具体的日期和时间，也可以是一个从会话创建时开始的时间段。
 *  **安全性**：Session的会话ID需要进行保护，以防止会话劫持和其他安全问题。

#### 应用场景 ####

Session在Web开发中有多种应用场景，包括：

*  **用户身份验证**：Session用于存储用户的身份验证状态，以便在用户访问需要验证的资源时进行验证。
 *  **购物车**：Session用于存储用户的购物车内容，以便在用户进行结账或继续购物时保持购物车状态。
 *  **个性化设置**：Session可以用于存储用户的个性化首选项，例如语言偏好、主题设置等。

以下是一个使用Express.js处理Session的示例：

### 3. 什么是SessionStorage？ ###

#### 属性 ####

SessionStorage是一种在客户端存储临时数据的机制。SessionStorage具有以下属性：

*  **存储位置**：SessionStorage数据存储在客户端的内存中，与当前会话关联。
 *  \*\*

会话范围\*\*：SessionStorage数据仅在浏览器会话期间保留，当用户关闭标签页或浏览器时数据将被清除。

*  **域和协议限制**：SessionStorage数据只能在同一域和协议下访问。

#### 应用场景 ####

SessionStorage在Web开发中有多种应用场景，包括：

*  **临时数据存储**：SessionStorage可用于在页面之间传递临时数据，例如表单数据、临时状态等。
 *  **表单数据保存**：SessionStorage可用于保存用户填写的表单数据，以便在刷新页面或返回页面时恢复数据，防止数据丢失。
 *  **单页应用状态管理**：在单页应用中，可以使用SessionStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。

以下是一个使用JavaScript操作SessionStorage的示例：

// 设置SessionStorage
    sessionStorage.setItem("username", "John Doe");
    
    // 读取SessionStorage
    const username = sessionStorage.getItem("username");
    console.log(username);

### 4. 什么是LocalStorage？ ###

#### 属性 ####

LocalStorage是一种在客户端存储持久性数据的机制。LocalStorage具有以下属性：

*  **存储位置**：LocalStorage数据存储在客户端的持久化介质中，与浏览器相关联。
 *  **持久性**：LocalStorage数据不受会话结束或浏览器关闭的影响，会一直保留在浏览器中，除非被显式删除。
 *  **域和协议限制**：LocalStorage数据只能在同一域和协议下访问。

#### 应用场景 ####

LocalStorage在Web开发中有多种应用场景，包括：

*  **本地数据存储**：LocalStorage可用于在客户端存储持久性数据，如用户首选项、缓存的数据等。
 *  **离线应用**：LocalStorage可用于存储离线应用所需的资源，例如HTML、CSS和JavaScript文件，以实现离线访问能力。
 *  **单页应用状态管理**：在单页应用中，可以使用LocalStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。

以下是一个使用JavaScript操作LocalStorage的示例：

// 设置LocalStorage
    localStorage.setItem("username", "John Doe");
    
    // 读取LocalStorage
    const username = localStorage.getItem("username");
    console.log(username);

### 5. Cookie vs. Session vs. SessionStorage vs. LocalStorage ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>属性</th> 
   <th>存储位置</th> 
   <th>生命周期</th> 
   <th>安全性</th> 
   <th>大小限制</th> 
   <th>跨域限制</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Cookie</td> 
   <td>键值对</td> 
   <td>客户端</td> 
   <td>可配置</td> 
   <td>受同源策略限制</td> 
   <td>约4KB</td> 
   <td>是</td> 
  </tr> 
  <tr> 
   <td>Session</td> 
   <td>会话ID和服务器端存储</td> 
   <td>服务器端</td> 
   <td>可配置</td> 
   <td>较高（会话ID保护）</td> 
   <td>无</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>SessionStorage</td> 
   <td>键值对</td> 
   <td>客户端</td> 
   <td>浏览器会话期间</td> 
   <td>同源</td> 
   <td>约5MB</td> 
   <td>否</td> 
  </tr> 
  <tr> 
   <td>LocalStorage</td> 
   <td>键值对</td> 
   <td>客户端</td> 
   <td>永久（需显式删除）</td> 
   <td>同源</td> 
   <td>约5MB</td> 
   <td>否</td> 
  </tr> 
 </tbody> 
</table>

Cookie、Session、SessionStorage和LocalStorage都是常见的Web存储解决方案，每种方案都有其适用的场景和特点。

*  使用Cookie可以在客户端存储数据，适用于存储会话标识符、用户首选项和追踪用户行为等场景。
 *  Session用于在服务器端存储和管理用户的会话状态，适用于身份验证、购物车和个性化设置等场景。
 *  SessionStorage用于在浏览器会话期间存储临时数据，适用于传递数据、保存表单数据和单页应用状态管理等场景。
 *  LocalStorage用于在客户端存储持久性数据，适用于本地数据存储、离线应用和单页应用状态管理等场景。

根据具体的需求和场景，选择合适的存储方案可以更好地管理和使用数据。

### 6. 参考资料 ###

*  [MDN Web Docs - HTTP Cookies][]
 *  [MDN Web Docs - Web Storage API][]
 *  [MDN Web Docs - SameSite attribute][]
 *  [MDN Web Docs - HttpOnly attribute][]
 *  [W3Schools - JavaScript Cookies][]
 *  [W3Schools - HTML Web Storage Objects][]

[MDN Web Docs - HTTP Cookies]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
[MDN Web Docs - Web Storage API]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
[MDN Web Docs - SameSite attribute]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
[MDN Web Docs - HttpOnly attribute]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies
[W3Schools - JavaScript Cookies]: https://www.w3schools.com/js/js_cookies.asp
[W3Schools - HTML Web Storage Objects]: https://www.w3schools.com/html/html5_webstorage.asp