• 本地存储

    本地存储

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

    本地存储特性

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

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

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

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

    window.sessionStorage

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

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

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

    • 存储数据：sessionStorage.setItem(key, value)
    1.         set.addEventListener('click', function () {
    2.             var val = input.value;
    3.             localStorage.setItem('uname', val);
    4.         })
    • 获取数据：sessionStorage.getItem(key)
        sessionStorage.getItem('uname')
    • 删除数据：sessionStorage.removeItem(key)
                sessionStorage.removeItem('uname');
    • 删除所有数据：sessionStorage.clear()
                sessionStorage.clear();

    window.localStorage

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

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

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

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

    可以多窗口（页面）共享（同一浏览器可以共享），当你在第十个页面打开谷歌浏览器存储了数据，然后你在第二个页面log输出了localStorage的uname，可以输出

            console.log(localStorage.getItem('uname')); // localStorage

    案例：记住用户名

    如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

    • 把数据存起来，用到本地存储
    • 关闭页面，也可以显示用户名，所以用到localStorage
    • 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
    • 当复选框发生改变的时候 change事件 ,如果勾选，就存储，否则就移除
    1. <body>
    2.     <input type="text" id="username">
    3.     <input type="checkbox" id="remember">记住用户名
    4.     <script>
    5.         var uname = document.querySelector('#username');
    6.         var remember = document.querySelector('#remember');
    7.         // 如果localStorage里面有数据就进入if语句
    8.         if (localStorage.getItem('uname')) {
    9.             username.value = localStorage.getItem('uname'); // 把username赋值给value
    10.             remember.checked = true; // 把复选框勾上
    11.  
    12.         }
    13.         // 当复选框改变的时候
    14.         remember.addEventListener('change', function () {
    15.             if (this.checked) { // 如果被勾上
    16.                 localStorage.setItem('uname', uname.value); // 就存储uname里面的数据
    17.             } else {
    18.                 localStorage.removeItem('uname'); // 取消勾选的话就移除里面的uname数据
    19.             }
    20.         })
    21.     </script>
    22. </body>

  • 相关阅读:
    github提示Permission denied (publickey)，如何才能解决
    Centos下安装FTP服务
    mysql 日志分类详解
    C++ 虚函数表
    安装系统出现dracut-initqueue状态
    三子棋小游戏（C语言）
    深度学习库 SynapseML for .NET 发布0.1 版本
    Redis未授权访问漏洞复现
    spring cloud day(6） gateway网关
    【IoT开发工具箱 | 03】搭建可外网访问的内网穿透http文件服务器
  • 原文地址：https://blog.csdn.net/muziqwyk/article/details/124892604