美文网首页
WebAPIs-本地存储

WebAPIs-本地存储

作者: Imkata | 来源:发表于2022-04-11 09:31 被阅读0次

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

    1 - 本地存储特性

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

    2 - window.sessionStorage

    1. 生命周期为关闭浏览器窗口
    2. 在同一个窗口(页面)下数据可以共享
    3. 以键值对的形式存储使用

    存储数据:

    // 省略了window
    sessionStorage.setItem(key, value)
    

    获取数据:

    sessionStorage.getItem(key)
    

    删除数据:

    sessionStorage.removeItem(key)
    

    清空数据:(所有都清除掉)

    sessionStorage.clear()
    

    3 - window.localStorage

    1. 生命周期永久生效,除非手动删除,否则关闭页面也会存在
    2. 可以多窗口(页面)共享(同一浏览器可以共享)
    3. 以键值对的形式存储使用

    存储数据:

    // 省略了window
    localStorage.setItem(key, value)
    

    获取数据:

    localStorage.getItem(key)
    

    删除数据:

    localStorage.removeItem(key)
    

    清空数据:(所有都清除掉)

    localStorage.clear()
    

    4 - 案例:记住用户名

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

    案例分析:

    1. 把数据存起来,用到本地存储
    2. 关闭页面,也可以显示用户名,所以用到 localStorage
    3. 打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框
    4. 当复选框发生改变的时候change事件
    5. 如果勾选,就存储,否则就移除
    <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>
    

    相关文章

      网友评论

          本文标题:WebAPIs-本地存储

          本文链接:https://www.haomeiwen.com/subject/uvkisrtx.html