2021-01-27 本地存储

(一)概述
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,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>

你可能感兴趣的:(自学)