2021-01-27 本地存储

最新推荐文章于 2022-03-22 17:19:53 发布

gh100330

最新推荐文章于 2022-03-22 17:19:53 发布

阅读量122

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/gh100330/article/details/113269759

版权

自学专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

（二）本地存储的特性
1 .数据存储在用户浏览器中

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

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

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

（三）

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

语法：
①存储

sessionStorage.setItem(key, value);

②获取

sessionStorage.getItem(key);

③删除

sessionStorage.removeItem(key);

④全部删除

sessionStorage.clear();

2 .window.localStorage
特性：
①生命周期为永久，除非手动删除
②可以多窗口共享，同一浏览器可以共享
③以键值对的方式存储使用

语法：
①存储

localStorage.setItem(key, value);

②获取

localStorage.getItem(key);

③删除

localStorage.removeItem(key);

④全部删除

localStorage.clear();

(四)利用本地存储记住用户名案例

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

    <script>
        var ipts = document.querySelectorAll('input');

        if (window.localStorage.getItem('uname')) {
            ipts[0].value = localStorage.getItem('uname');
            ipts[1].checked = true;
        } else {
            ipts[1].checked = false;
        }
        // 复选框按钮状态改变事件 change 
        ipts[1].addEventListener('change', function() {
            if (this.checked) {
                window.localStorage.setItem('uname', ipts[0].value);
            } else {
                window,
                localStorage.removeItem('uname');
            }
        })
    </script>
</body>