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

特性 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 的常用场景:

  1. 保存用户登录状态:当用户成功登录后,服务器可以设置一个包含用户ID或其他身份验证信息的cookie。下次用户访问同一网站时,浏览器会自动携带这个cookie,服务器通过读取cookie就能识别用户已登录,从而避免用户反复输入账号密码。

  2. 持久化用户设置

  3. 跟踪用户行为:网站分析工具可以利用cookie记录用户的访问路径、停留时间等信息,以便优化网站设计和营销策略。

  4. 搜索引擎和广告定向:搜索引擎和在线广告服务可能会使用cookie追踪用户的搜索历史和兴趣点,以此来提供个性化的搜索结果或展示相关广告。

Cookie的注意事项:

  1. 输出控制:设置cookie前不能有任何HTTP响应头部之外的数据输出,包括HTML、空白字符等,否则可能导致cookie设置失败。

  2. 初始化与获取:设置cookie后,在当前页面刷新前,$_COOKIE数组可能不会立即更新,需要在新的页面请求中才能获取到新设置的cookie值。

  3. 大小和数量限制:单个cookie大小通常限制在4KB左右,并且单个域下的cookie总数量有限制,一般为300个左右,各个浏览器的具体限制可能不同。

  4. 特殊字符限制:Cookie的键名和值应避免使用分号(;)、逗号(,)、等号(=)以及空格等特殊字符,因为它们在cookie格式中有特殊含义。

  5. 安全性:因为cookie存储在客户端,敏感信息(如密码)不应明文存储在cookie中。如果需要存储敏感信息,应加密处理,并结合HTTPS等安全协议传输。

  6. 有效期:应合理设置cookie的失效时间(Expires/Max-Age),以确保用户隐私和数据有效性。

  7. 跨域问题:cookie遵循同源策略,不能跨域名共享,除非设置了正确的domain属性。

  8. 用户设置:用户可以自行禁用浏览器的cookie功能,或者设置隐私模式阻止cookie的存储,开发者应考虑到这一情况并提供备选方案。

  9. 隐私保护:根据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>

上一篇:SQL注入有哪些危害,要怎么避免


下一篇:爬虫 selenium-浏览器操作