JavaScript 本地存储

最新推荐文章于 2024-05-08 17:57:05 发布

栈老师不回家

最新推荐文章于 2024-05-08 17:57:05 发布

阅读量947

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_52861684/article/details/127400478

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章目录

1.本地存储简介

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5 规范提出了相关解决方案。

特性：
① 数据存储在用户浏览器中；
② 设置、读取方便，甚至页面刷新不丢数据；
③ 容量较大，sessionStorage 约5M、localStorage 约20M；
④ 只能存储字符串，可以将对象 JSON.stringify() 编码后存储

2.window.sessionStorage

特点：
① 生命周期为关闭浏览器窗口；
② 在同一个窗口（页面）下数据可以共享；
③ 以键值对的形式存储使用。

//1.存储数据
sessionStorage.setItem(key, value);
//2.获取数据
sessionStorage.getItem(key);
//3.删除数据
sessionStorage.removeItem(key);
//4.清空所有数据
sessionStorage.clear();

<!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 type="text" class="uname" />
  <input type="password" class="upwd" />
  <button class="set">保存数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>
  <script>
    var ipts = document.querySelectorAll('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var clear = document.querySelector('.clear');
    set.addEventListener('click', function() {
      sessionStorage.setItem('uname', ipts[0].value);
      sessionStorage.setItem('upwd', ipts[1].value);
    })
    get.addEventListener('click', function() {
      uname = sessionStorage.getItem('uname');
      upwd = sessionStorage.getItem('upwd');
      alert(uname + '，' + upwd);
    })
    remove.addEventListener('click', function() {
      sessionStorage.removeItem('uname');
      sessionStorage.removeItem('upwd');
    })
    clear.addEventListener('click', function() {
      sessionStorage.clear();
    })
  </script>
</body>
</html>

运行结果：
在这里插入图片描述
你可以通过 F12 键到我们的后台去查看，Application → Session Storage → file://

只要没关闭浏览器窗口，不管怎么刷新页面数据永远都在！

3.window.localStorage

特点：
① 生命周期永久生效，除非手动删除，否则即使关闭页面信息也会存在；
② 可以多窗口（页面）共享（同一浏览器）；
③ 以键值对的形式存储使用。

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

4.记住用户名

案例分析：
① 把数据存起来，用到本地数据；
② 关闭页面，也可以显示用户名，所以用到 localStorage；
③ 打开页面，先判断是否有这个用户名，如果有，就在表单里显示用户名，并且勾选复选框。

<!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 type="text" id="username">
  <input type="checkbox" name="" id="remember"> 记住用户名
  <script>
    var username = document.querySelector('#username');
    var remember = document.querySelector('#remember');
    if (localStorage.getItem('username')) {
      username.value = localStorage.getItem('username');
      remember.checked = true;
    }
    remember.addEventListener('change', function() {
      if(this.checked) {
        localStorage.setItem('username', username.value);
      } else {
        localStorage.removeItem('username');
      }
    })
  </script>
</body>
</html>