原生js本地存储

最新推荐文章于 2023-06-06 10:14:56 发布

清晨投递

最新推荐文章于 2023-06-06 10:14:56 发布

阅读量913

点赞数

分类专栏： javaScript 文章标签： javascript 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_51244384/article/details/122759509

版权

javaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

概述

本地存储特性

window.sessionStorage

window.localStorage

案例：记住用户名

概述

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

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便，甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M，localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify（）编码后存储

window.sessionStorage

1、生命周期为关闭浏览器窗口

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

3、以键值对的形式存储使用

<body>
  <input type="text">
  <button>存储数据</button>
  <button>获取数据</button>
  <button>删除数据</button>
  <button>清空数据</button>
  <script>
    var input = document.querySelector('input');
    var btn = document.querySelectorAll('button');
    // 存储
    btn[0].onclick = function () {
      var text = input.value;
      // 存储数据 key , value
      sessionStorage.setItem('text', text);
    }
    // 获取
    btn[1].onclick = function () {
      // 获取数据 key
      console.log(sessionStorage.getItem('text'));
    }
    // 删除
    btn[2].onclick = function () {
      // 删除数据 key
      sessionStorage.removeItem('text');
    }
    // 清空
    btn[3].onclick = function () {
      // 清空所有数据
      sessionStorage.clear();
    }
  </script>
</body>

window.localStorage

1、声明周期永久生效，除非手动删除，否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

<body>
  <input type="text">
  <button>存储数据</button>
  <button>获取数据</button>
  <button>删除数据</button>
  <button>清空数据</button>
  <script>
    var input = document.querySelector('input');
    var btn = document.querySelectorAll('button');
    // 存储
    btn[0].onclick = function () {
      var text = input.value;
      // 存储数据 key , value
      localStorage.setItem('text', text);
    }
    // 获取
    btn[1].onclick = function () {
      // 获取数据 key
      console.log(localStorage.getItem('text'));
    }
    // 删除
    btn[2].onclick = function () {
      // 删除数据 key
      localStorage.removeItem('text');
    }
    // 清空
    btn[3].onclick = function () {
      // 清空所有数据
      localStorage.clear();
    }
  </script>
</body>

案例：记住用户名

<body>
  <input type="text">
  <input type="checkbox" name="" id="">记住用户名

  <script>
    // 当勾选记住用户名时,下次打开页面显示记住的用户名
    var input = document.querySelectorAll('input')[0];
    var check = document.querySelectorAll('input')[1];

    // 判断本地存储是否有该数据 有 勾选复选框 文本框显示该数据
    if (localStorage.getItem('userName')) {
      check.checked = true;
      input.value = localStorage.getItem('userName');
    }
    // change事件 当值发生改变时触发
    check.addEventListener('change', function () {
      // 如果勾选 将数据存储到本地存储 否则删除
      if (check.checked) {
        localStorage.setItem('userName', input.value);
      } else {
        localStorage.removeItem('userName');
      }

    })
  </script>
</body>

清晨投递

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js本地存储

目录概述本地存储特性window.sessionStoragewindow.localStorage案例：记住用户名概述随着互联网的快速发展，基于网页的应用越来越普遍，同时变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。本地存储特性1、数据存储在用户浏览器中2、设置、读取方便，甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M，localStorage约20M4、只能存储字符.
复制链接

扫一扫

专栏目录