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

点击在线阅读，体验更好	链接
现代JavaScript高级小册	链接
深入浅出Dart	链接
现代TypeScript高级小册	链接

详解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);
}// 读取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的示例：

const express = require("express");
const session = require("express-session");



    const app = express();
    
    app.use(session({
      secret: "mysecret",
        resave: false,
          saveUninitialized: true,
            cookie: { secure: true, sameSite: "strict", httpOnly: true }
            }));
            
            app.get("/", (req, res) =&gt; {
              req.session.username = "John Doe";
                res.send("Session is set.");
                });
                
                app.get("/profile", (req, res) =&gt; {
                  const username = req.session.username;
                    res.send("Welcome, " + username);
                    });
                    
                    app.listen(3000, () =&gt; {
                      console.log("Server is running on port 3000");
                      });</code></pre><h3 id="item-0-5">3. 什么是SessionStorage？</h3><h4>属性</h4><p>SessionStorage是一种在客户端存储临时数据的机制。SessionStorage具有以下属性：</p><ul><li><strong>存储位置</strong>：SessionStorage数据存储在客户端的内存中，与当前会话关联。</li><li><strong>会话范围</strong>：SessionStorage数据仅在浏览器会话期间保留，当用户关闭标签页或浏览器时数据将被清除。</li><li><strong>域和协议限制</strong>：SessionStorage数据只能在同一域和协议下访问。</li></ul><h4>应用场景</h4><p>SessionStorage在Web开发中有多种应用场景，包括：</p><ul><li><strong>临时数据存储</strong>：SessionStorage可用于在页面之间传递临时数据，例如表单数据、临时状态等。</li><li><strong>表单数据保存</strong>：SessionStorage可用于保存用户填写的表单数据，以便在刷新页面或返回页面时恢复数据，防止数据丢失。</li><li><strong>单页应用状态管理</strong>：在单页应用中，可以使用SessionStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。</li></ul><p>以下是一个使用JavaScript操作SessionStorage的示例：</p><pre><code class="javascript">// 设置SessionStorage
                      sessionStorage.setItem("username", "John Doe");
                      
                      // 读取SessionStorage
                      const username = sessionStorage.getItem("username");
                      console.log(username);</code></pre><h3 id="item-0-6">4. 什么是LocalStorage？</h3><h4>属性</h4><p>LocalStorage是一种在客户端存储持久性数据的机制。LocalStorage具有以下属性：</p><ul><li><strong>存储位置</strong>：LocalStorage数据存储在客户端的持久化介质中，与浏览器相关联。</li><li><strong>持久性</strong>：LocalStorage数据不受会话结束或浏览器关闭的影响，会一直保留在浏览器中，除非被显式删除。</li><li><strong>域和协议限制</strong>：LocalStorage数据只能在同一域和协议下访问。</li></ul><h4>应用场景</h4><p>LocalStorage在Web开发中有多种应用场景，包括：</p><ul><li><strong>本地数据存储</strong>：LocalStorage可用于在客户端存储持久性数据，如用户首选项、缓存的数据等。</li><li><strong>离线应用</strong>：LocalStorage可用于存储离线应用所需的资源，例如HTML、CSS和JavaScript文件，以实现离线访问能力。</li><li><strong>单页应用状态管理</strong>：在单页应用中，可以使用LocalStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。</li></ul><p>以下是一个使用JavaScript操作LocalStorage的示例：</p><pre><code class="javascript">// 设置LocalStorage
                      localStorage.setItem("username", "John Doe");
                      
                      // 读取LocalStorage
                      const username = localStorage.getItem("username");
                      console.log(username);</code></pre><h3 id="item-0-7">5. Cookie vs. Session vs. SessionStorage vs. LocalStorage</h3><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><p>Cookie、Session、SessionStorage和LocalStorage都是常见的Web存储解决方案，每种方案都有其适用的场景和特点。</p><ul><li>使用Cookie可以在客户端存储数据，适用于存储会话标识符、用户首选项和追踪用户行为等场景。</li><li>Session用于在服务器端存储和管理用户的会话状态，适用于身份验证、购物车和个性化设置等场景。</li><li>SessionStorage用于在浏览器会话期间存储临时数据，适用于传递数据、保存表单数据和单页应用状态管理等场景。</li><li>LocalStorage用于在客户端存储持久性数据，适用于本地数据存储、离线应用和单页应用状态管理等场景。</li></ul><p>根据具体的需求和场景，选择合适的存储方案可以更好地管理和使用数据。</p><h3 id="item-0-8">6. 参考资料</h3><ul><li><a target="_blank" href="https://link.segmentfault.com/?enc=rZ7CygorwNPcbcgGqkUZ5Q%3D%3D.cXNd4GqNnw1WFCFm73vfdhuexSfAm8%2B7KCduuNZ3QkgC6WIdyNB%2F%2BIaMgzMX6EgufFYITBhTWTfhb4UGtzD6eA%3D%3D">MDN Web Docs - HTTP Cookies</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=f%2Fe43SIph3RQkj%2B6CfRgcg%3D%3D.pGvLhxrd0tBfjfFm2f%2BlDuWXCod8Ivdoc8KVVYkI7uqHHKnQHQ3R%2FNz3otXeRgmM4Fe49yrKoTobx2JfvdcWsX6WWRPcAjhpUqi8SNu%2FNh8%3D">MDN Web Docs - Web Storage API</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=C2J4Nb0laKtXo2zMOo7QTA%3D%3D.%2FH35p5YtfQl8sj2H1QMCroRHbMUqLvegbmjuSAkrJqe%2FmEtYgdp5eaY1Ghfp1PdQV4MCmPA%2FRAztUckrFS6BKezFdvTwtLXFx4M8I3IFfxg%3D">MDN Web Docs - SameSite attribute</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=BPT0wKbBvHftXgTwtapL8A%3D%3D.1hsa914OslTnfClqK5XCsPXdPM9lhhNBTGjg%2BTQ6nT4BIGg1rnJ7esUNRf9LmdHnpV3h%2B%2Fpn11D0bpHGBwxuH3EJT%2FE75tRU1rMLcNsjEbqpAskD22MkSwYaReE7dvsv">MDN Web Docs - HttpOnly attribute</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=Idn4pJ9v4XpE53%2Fox%2B32Zw%3D%3D.KqdUbYXnZvvCvzx%2Bv%2FILeNrKnxg%2BC5syLunqYkQ2ooVWS2C%2BSRegMcyIvBarrCTY">W3Schools - JavaScript Cookies</a></li><li><a target="_blank" href="https://link.segmentfault.com/?enc=qiLI%2Bn6%2B0hqc4dvRgwtBWg%3D%3D.FpUto4V38m1pzoVvBfZFZj2ni1BE65dWD0WZ%2Bm%2FOr%2FhnPOfhQh94FbH%2FxExK1b26VpHtEWWaW0nENXBps6cGhA%3D%3D">W3Schools - HTML Web Storage Objects</a></li></ul>