localStorage、sessionStorage的区别与共同点

最新推荐文章于 2024-06-15 12:33:15 发布

怕浪小乌龟

最新推荐文章于 2024-06-15 12:33:15 发布

阅读量167

点赞数 1

分类专栏： H5 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/wjh1840226173/article/details/120622713

版权

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了localStorage和sessionStorage的区别，包括它们的存储方式、数据有效期、应用场景。localStorage用于长期存储，数据在浏览器关闭后仍保留，而sessionStorage则在当前浏览器窗口关闭后失效。此外，还提到了它们在防止意外刷新时保留用户输入的作用，以及与cookie的对比。示例代码展示了如何设置和获取这两个存储机制的数据。

摘要由CSDN通过智能技术生成

localStorage、sessionStorage的区别与共同点

1、localStorage 的设置和获取

设置：setItem(‘名称’，‘值’)
获取：getItem(‘名称’)

localStorage中的键值对总是以字符串的形式存储，存储在localStorage 的数据可以长期保留；
大小：5M甚至更多

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input id="theName" type="text" placeholder="输入名字" >
  <input id="btn" type="button" value="添加姓名" onclick="getName()">
  <p id="txt"></p>
  <script>
    
    function getName() {
      let myname= document.getElementById('theName').value
      // let myname = theName.value
      let btn = document.getElementById('btn')
      let txt = document.getElementById('txt')
    
      console.log(myname);
      if(!myname || myname == null){
        alert('名字不能为空！')
      }else{
        localStorage.setItem('myname',myname)
        txt.innerHTML = myname
      }
    }
    if(!localStorage.getItem('myname')){
      getName()
    }else{
      let storeName = localStorage.getItem('myname')
      console.log(txt.textContent);
      txt.textContent = '你好' + storeName;  
    }
    // let body = document.querySelectorAll('body')[0]
    // console.log(body.textContent);
    // console.log('------------------------------');
    // console.log(body.innerHTML);
    // console.log('------------------------------');
    // console.log(body.innerText);

    let storeHello = localStorage.setItem('hello','helloworld')
    let gethello = localStorage.getItem('hello')
    console.log(gethello);
    // localStorage.clear();
    console.log(window.indexedDB);

  </script>
</body>
</html>

localStorage 的值不会被浏览器清除，除非用户或者开发者自己清除
用户清除浏览器历史记录的时候会被清除，开发者使用localStorage.clear()清除
浏览器的tab都会保留localStorage的值，关闭浏览器再打开也有保留，所有网站的localStorage都可以再任意的浏览器tab标签页访问到，这也是和sessionStorage的区别

在这里插入图片描述

sessionStorage 的设置和获取

设置：setItem(‘名称’，‘值’)
获取：getItem(‘名称’)

大小：5M甚至更多

sessionStorage 和 localStorage的设置和获取相似

防止用户输入过程中的页面意外刷新，导致需要从新输入，可以使用sessionStorage 来监听保留实时的输入内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input id="field" type="text" placeholder="输入点东西" >
  <input id="btn" type="button" value="添加" onclick="getName()">
  <p id="txt"></p>

  <script>
    sessionStorage.setItem('myCat', 'Tom');
    // 获取文本输入框
    let field = document.getElementById("field");

    // 检测是否存在 autosave 键值
    // (这个会在页面偶然被刷新的情况下存在)
    if (sessionStorage.getItem("autosave")) {
      // 恢复文本输入框的内容
      field.value = sessionStorage.getItem("autosave");
    }

    // 监听文本输入框的 change 事件
    field.addEventListener("change", function () {
      // 保存结果到 sessionStorage 对象中
      sessionStorage.setItem("autosave", field.value);
    });

    document.getElementById('txt').innerHTML = localStorage.getItem('myname')
  </script>
</body>

</html>

在这里插入图片描述

sessionStorage 的值只在当前的tab页面上有效，页面刷新时可以保留数据，但是浏览器关闭数据就会被清理

总结

结合Cookies对比

数据有效期：

cookie:一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，如果设置了时间，cookie就会存储在硬盘中，过期失效

sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久删除

在通讯方面：

cookie：cookie在浏览器和服务器之间来回传递，如果使用cookie保存过多数据会造成性能问题

sessionStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

localStorage：仅在客户端（浏览器）中保存，不参与服务器的通信

应用场景：

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息

sessionStorage：敏感账号一次性登录，单页面用的较多

localStorage：用于长期登录，适于长期保存在本地的数据

点击查看官方文档

在这里插入图片描述

怕浪小乌龟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
localStorage、sessionStorage的区别与共同点

localStorage、sessionStorage的区别与共同点1、localStorage 的设置和获取设置：setItem(‘名称’，‘值’)获取：getItem(‘名称’)localStorage中的键值对总是以字符串的形式存储，存储在localStorage 的数据可以长期保留；大小：5M甚至更多<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫

专栏目录