介绍

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

本地存储特性

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

两种存储方式

window.sessionStorage

介绍

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

    ​ 生命周期就是数据销毁的时间点
    ​ 不关闭该页面 可以刷新 数据还在

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

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

  4. 本页面下的任何地方都可以使用

存储数据:

sessionStorage.setItem(key, value)

key:
自定义属性名 如uname 要用单引号包起来
value:
实现将获得的值存入一个变量
这个key就是变量的名字
var val = input.value;

实例

set.addEventListener('click', function(){
    //当我们点击了之后, 就可以把表单里面的值存储起来
    var val = input.value;
    sessionStorage.setItem('uname', val)
    
})

可以在f12 下的应用程序里面的存储 绘画存储里面查看

获取数据:

sessionStorage.getItem(key)

get.addEventListener('click', function(){
    //当我们点击了之后, 就可以把表单里面的值获取过来
    console.log(sessionStorage.getItem('uname'));
})

删除数据:

sessionStorage.removeItem(key)

remove.addEventListener('click', function () {
    //当我们点击了之后, 就可以把表单里面的值根据属性名删除相应的属性值
    sessionStorage.removeItem('uname');
})

改数据 就是重新赋值

用储存数据(sessionStorage.setItem(key, value))的形式 重新给已设定的属性名赋值 达到覆盖之前的属性值的目的

set.addEventListener('click', function () {
    //当我们点击了之后, 就可以把表单里面的值存储起来
    var val = input.value;
    sessionStorage.setItem('uname', val);
    sessionStorage.setItem('pwd', val);
})

删除所有数据:

sessionStorage.clear()

del.addEventListener('click',function(){
    //当我们点击了之后,就可以把表单里面所有本地数据全部删除
    sessionStorage.clear();
})

这个意义: 括号内为空

window.localStorage

介绍

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

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

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

存储数据:

localStorage.setItem(key, value)

获取数据:

localStorage.getItem(key)

<script>
    var input = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get')
    var remove = document.querySelector('.remove')
    var del =document.querySelector('.del')
    set.addEventListener('click', function () {
        //当我们点击了之后, 就可以把表单里面的值存储起来
        var val = input.value;
        localStorage.setItem('uname', val);
        localStorage.setItem('pwd', val);
    })
    get.addEventListener('click', function () {
        //当我们点击了之后, 就可以把表单里面的值获取过来
        console.log(localStorage.getItem('uname'));
    })
    remove.addEventListener('click', function () {
        //当我们点击了之后, 就可以把表单里面的值根据属性名删除相应的属性值
        localStorage.removeItem('uname');
    })
    del.addEventListener('click',function(){
        //当我们点击了之后,就可以把表单里面所有本地数据全部删除
        localStorage.clear();
    })
</script>

删除数据:

localStorage.removeItem(key)

移除所有数据

localStorage.removeItem(key)

案例:记住用户名

要求

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

分析

① 把数据存起来，用到本地存储
② 关闭页面，也可以显示用户名，所以用到localStorage
③ 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
④ 当复选框发生改变的时候 change事件
⑤ 如果勾选，就存储，否则就移除

代码

<body>
    <input type="text" id="username">
    <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remeber = 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>
---完结撒花---