Cookie、LocalStorage和SessionStorage区别详解

最新推荐文章于 2024-05-10 09:40:33 发布

yun_shuo

最新推荐文章于 2024-05-10 09:40:33 发布

阅读量1.4k

点赞数 3

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/yun_shuo/article/details/117134944

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Cookie、LocalStorage和SessionStorage区别详解

概念理解
Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。
sessionStorage 与 localStorage 的接口类似，相较cookie一般存储大一些的数据，但保存数据的生命周期与 localStorage 不同。 Session的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
他们区别对比如下图所示
在这里插入图片描述

应用场景

1、在开发中每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简，比较常用的一个应用场景就是判断用户是否登录。
2、针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录。
3、用到 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。
4、产生一些本地数据，localStorage是非常适用，遇到一些内容特别多的表单，优化用户体验，可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写发挥sessionStorage 的作用。

sessionStorage常用方法

用在同一个窗口（页面）下的数据可以共享

sessionStorage.setItem(key, value) ：存储数据
sessionStorage.getItem(key) ：获取数据
sessionStorage.removeItem(key) ：删除数据
sessionStorage.clear() ：删除所有数据

localStorage常用方法

用在多窗口（页面）共享数据，同一浏览器可以共享数据

localStorage.setItem(key,value) ：存储数据
localStorage.getItem(key) ：获取数据
localStorage.removeItem(key) ：删除数据
localStorage.clear() ：清空数据 / 删除所有数据

应用举例

<body>
    <input type="text" id="username" />
    <input type="checkbox" id="check" /> 记住用户名
</body>
<script>
    var username = document.querySelector('#username');
    var check = document.querySelector('#check');
    check.checked = false;
    // 先看看localStorage里是否已有用户名，有就直接拿出来放到text框中，且复选框选中
    if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username');
        check.checked = true;
    }
    // 监听复选框是否改变
    check.addEventListener('change', function() {
        if (this.checked) {
            // 如果复选框被选中，则将用户名存入localStorage中
            localStorage.setItem('username', username.value);
        } else {
            // 复选框未被选中，则清空用户名
            localStorage.removeItem('username');
            check.checked = false;
        }
    })
</script>

sessionStorage应用实例

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>SessionStorage</title>
  <script type="text/javascript">
    window.onload = function () {
      //首先获得body中的3个input元素
      var msg = document.getElementById("msg"); //文本框要输入的内容
      var getData = document.getElementById("getData"); //获取数据
      var setData = document.getElementById("setData"); //保存数据
      var removeData = document.getElementById("removeData"); //移除数据
      setData.onclick = function () //存入数据
      {
        if (msg.value) {
          sessionStorage.setItem("data", msg.value); //把data对应的值保存到sessionStorage
          alert("信息已保存到data字段中");
        } else {
          alert("信息不能为空");
        }
      }

      getData.onclick = function () //获取数据
      {
        var msg = sessionStorage.getItem("data");
        if (msg) {
          alert("data字段中的值为：" + msg); //把data对应的值弹出来
        } else {
          alert("data字段无值！");
        }
      }
      removeData.onclick = function () //移除数据
      {
        var msg = sessionStorage.getItem("data");
        //sessionStorage.clear(msg);  //清除本地所有的key/value
        sessionStorage.removeItem("data");
      }
    }
  </script>
</head>

<body>
  <input id="msg" type="text" />
  <input id="setData" type="button" value="保存数据" />
  <input id="getData" type="button" value="获取数据" />
  <input id="removeData" type="button" value="移除数据" />
</body>

</html>

运行代码后
在这里插入图片描述
存储数据可以在控制台查看到数据

yun_shuo

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
Cookie、LocalStorage和SessionStorage区别详解

Cookie、LocalStorage和SessionStorage区别详解概念理解Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。sessionStorage 与 localStorage
复制链接

扫一扫