浏览器中localStroage、sessionStorage、cookie的区别与使用

作者：小小林熬夜学编程 | 2024-04-07 08:50:36

踩

特性	localStorage	sessionStorage	Cookie	Session
存储位置	浏览器本地	浏览器本地	浏览器本地	服务器
数据传输	不自动发送	不自动发送	自动发送	ID自动发送
存储类型	键值对	键值对	文本	多种类型（任意）
存储大小	通常约5MB	通常约5MB	通常≤4KB	无硬性限制
生命周期	持久化存储	关闭窗口/标签页后清除	可设置有效期	依赖服务器配置
跨窗口共享	同源窗口间共享	不跨窗口共享	同源窗口间共享	根据ID共享
安全性	较低（易被用户访问）	较低（易被用户访问）	中等（可加密）	较高（服务器端）

一、localStorage

常用场景：

需要持久化存储的数据。例如用户的一些主体、字体设置，登录的token，访问的历史记录，需要离线缓存的数据。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 存储数据到sessionStorage
      sessionStorage.setItem("键名", "存储的值");
      // 获取sessionStorage中的数据
      let sessionMessage = sessionStorage.getItem("键名");
      console.log(sessionMessage); //存储的值
 
      //存储对象需要转换为字符串
      let message = {
        name: "张三",
        age: 18,
      };
      sessionStorage.setItem("message", JSON.stringify(message));
      //取出对象
      let obj = JSON.parse(sessionStorage.getItem("message"));
 
      // 删除sessionStorage中的特定数据
      sessionStorage.removeItem("message");
 
      // 清空所有sessionStorage数据
      sessionStorage.clear();
    </script>
  </body>
</html>

二、sessionStorage

常用场景：

只有当前会话需要使用的数据。例如一个按钮的点击次数。


   <script>
      // 存储数据到sessionStorage
      sessionStorage.setItem("键名", "存储的值");
      // 获取sessionStorage中的数据
      let sessionMessage = sessionStorage.getItem("键名");
      console.log(sessionMessage); //存储的值
 
      // 存储对象到sessionStorage
      let message = {
        name: "张三",
        age: 18,
      };
      sessionStorage.setItem("message", JSON.stringify(message));
      // 获取sessionStorage中的对象
      let newSessionMessage = JSON.parse(sessionStorage.getItem("message"));
 
      // 删除sessionStorage中的特定数据
      sessionStorage.removeItem("message");
 
      // 清空所有sessionStorage数据
      sessionStorage.clear();
    </script>

三、cookie

Cookie 的常用场景：

保存用户登录状态：当用户成功登录后，服务器可以设置一个包含用户ID或其他身份验证信息的cookie。下次用户访问同一网站时，浏览器会自动携带这个cookie，服务器通过读取cookie就能识别用户已登录，从而避免用户反复输入账号密码。
持久化用户设置
跟踪用户行为：网站分析工具可以利用cookie记录用户的访问路径、停留时间等信息，以便优化网站设计和营销策略。
搜索引擎和广告定向:搜索引擎和在线广告服务可能会使用cookie追踪用户的搜索历史和兴趣点，以此来提供个性化的搜索结果或展示相关广告。

Cookie的注意事项：

输出控制：设置cookie前不能有任何HTTP响应头部之外的数据输出，包括HTML、空白字符等，否则可能导致cookie设置失败。
初始化与获取：设置cookie后，在当前页面刷新前，$_COOKIE数组可能不会立即更新，需要在新的页面请求中才能获取到新设置的cookie值。
大小和数量限制：单个cookie大小通常限制在4KB左右，并且单个域下的cookie总数量有限制，一般为300个左右，各个浏览器的具体限制可能不同。
特殊字符限制：Cookie的键名和值应避免使用分号(;)、逗号(,)、等号(=)以及空格等特殊字符，因为它们在cookie格式中有特殊含义。
安全性：因为cookie存储在客户端，敏感信息（如密码）不应明文存储在cookie中。如果需要存储敏感信息，应加密处理，并结合HTTPS等安全协议传输。
有效期：应合理设置cookie的失效时间（Expires/Max-Age），以确保用户隐私和数据有效性。
跨域问题：cookie遵循同源策略，不能跨域名共享，除非设置了正确的domain属性。
用户设置：用户可以自行禁用浏览器的cookie功能，或者设置隐私模式阻止cookie的存储，开发者应考虑到这一情况并提供备选方案。
隐私保护：根据GDPR等法规要求，网站在使用cookie时需告知用户并获得用户同意，特别是涉及个人数据处理的情况。


    <script>
      // 设置一个名为 "username"，值为 "老王" 的Cookie，有效期为7天
      function setCookie(name, value, days) {
        var expires = "";
        if (days) {
          var date = new Date();
          date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
          expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
      }
 
      // 使用函数创建Cookie
      setCookie("username", "老王", 7);
 
      // 读取Cookie
      function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(";");
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == " ") c = c.substring(1, c.length);
          if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length, c.length);
        }
        return null;
      }
      // 使用函数读取Cookie
      var username = getCookie("username");
      console.log(username); // 老王
 
      // 删除Cookie
      function eraseCookie(name) {
        setCookie(name, "", -1); // 将过期时间设置为过去
      }
      // 使用函数删除Cookie
      eraseCookie("username");
    </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/377606