zoukankan      html  css  js  c++  java
  • 06 本地存储数据

    1.本地存储

    为了满足各种各样的需求,会经常在本地存储大量的数据,HTML规范提出了相关解决方案。

    1.1本都存储特性

    本地存储特性

    1. 数据存储在用户浏览器中
    2. 设置读取方便,甚至页面刷新不丢失数据
    3. 容量较大,sessionStorage约5M、localStorage约20M
    4. 只能存储字符串,可以将对象JSON.stringify()编码后存储

    1.2 window.sessionStorage

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

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

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

    存储
    sessionStorage.setItem(key,value)
    获得
    sessionStorage.getItem('uname')
    删除
    sessionStorage.removeItem('uname')
    删除全部
    sessionStorage.clear('uname')
    

    1.3 window.localStorage

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

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

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

    演示 记住用户名

    <body>
        <input type="text" id="username"><input type="checkbox" name="" id="remeber"> 记住用户名
        <script>
            var username = document.querySelector('#username')
            var remeber = document.querySelector('#remeber')
            if (localStorage.getItem('username')) {
                username.value = localStorage.getItem('username')
                remeber.checked = true
            }
            remeber.addEventListener('change', function() {
                if (this.checked) {
                    localStorage.setItem('username', username.value)
                } else {
                    localStorage.removeItem('username')
                }
            })
        </script>
    </body>
  • 相关阅读:
    单链表反转
    【华为悦读汇】技术发烧友:M-LAG
    Linux系列—策略路由、ip rule、ip route
    对象存储,为什么那么火?
    关于存储技术的最强入门科普
    OpenStack入门科普,看这一篇就够啦!
    虚拟化技术的本质
    师屎胜于熊便:FCoE iSCSI FC组网PK
    懂了!VMware/KVM/Docker原来是这么回事儿
    集群文件系统是什么
  • 原文地址:https://www.cnblogs.com/xujinglog/p/12986223.html
Copyright © 2011-2022 走看看