本地数据存储 —— sessionStorage和localStorage

简单介绍下，本地数据存储就有点像浏览器的缓存一样，如果你让浏览器保留了输入过的信息，下次再打开时，这组数据还会存在的。最形象的就是，我们有时候会在登陆的账号时选择记住账号和密码，这个就是典型的本次存储的应用。

 

本地存储是调试工具的Application。

本地存储有两种，sessionStorage和localStorage。分别来看下。

 

sessionStorage

sessionStorage存储特点

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

2. 同一个页面下数据可以共享；

3. 采用键值对的方式存储

四种常用的方法

以案例的形式看

结构

    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">删除所有数据</button>

        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;
            sessionStorage.setItem('uname', val);
        });
        // 点击获取数据按钮，控制台打印
        // 在页面没有关闭的时候是可以打印的，但是如果页面关闭后重新打开，就打印不了了
        get.addEventListener('click', function () {
            sessionStorage.getItem('uname');
            console.log(sessionStorage.getItem('uname'));
        });
        // 删除数据 删除key为uname的数据
        remove.addEventListener('click', function () {
            console.log('删除了uname');
            sessionStorage.removeItem('uname');

        });
        // 这个删除的是所有的数据 清空 
        // 不要轻易使用
        del.addEventListener('click', function () {
            sessionStorage.clear();
        })

setItem( key , value) —— 存储数据

 点击存储数据按钮，数据存储。但关闭页面重新打开时，是没有数据的。

getItem( key ) —— 获取数据

获取数据打印出来。重新打开页面时，发现是获取不出来的。

 

removeItem( key ) —— 删除数据

点击删除，数据存储里删除数据

clear() —— 删除多有数据 （清空）

这个方法的话，建议大家少使用，这里就不演示了，就是清空了存储的所有数据，这个操作是非常危险的。

 

 

localStorage

localStorage存储特点

1. 生命周期永久有效；就是关闭页面再打开时，存储的数据依然存在

2. 同一个浏览器下数据可以共享；

3. 采用键值对的方式存储

四种常用方法

与sessionStorage的方法一样。

setItem( key , value) —— 存储数据

getItem( key ) —— 获取数据

removeItem( key ) —— 删除数据

clear() —— 删除多有数据 （清空）

可以看下效果图，存储数据，关闭页面，检查数据时，数据依然在。

 

 

记住用户名案例

我们会发现在登陆账号时，都有一个选项是记住账号或密码，或者是记住用户名。这里我就模仿一下那个功能，记住用户名的功能。

需求：勾选记住用户名的按钮时，下次再打开页面，用户名会自动显示再文本框内。

这里用到了复选框的change事件 —— 复选框状态发生变化触发事件

因为是打开和关闭页面的操作，所有我们需要用到的本次存储是localStorage的方式。在打开页面后，我们需要首先判断本地存储里是否有uname这个属性key，如果存在就意味着上次的操作是记住了用户名，记住了用户名就要显示上次记住的用户名，并且让复选框是被选中的状态。第二步，我们需要去给复选框按钮添加侦听器，如果复选框按钮状态发生变化，选中时存储数据，不选中时删除数据。

这就是整个的思路。

代码实现

        // 需求 :勾选按钮时,下次打开时用户名直接显示在文本框
        // 选中记住用户名时,就把用户名存储起来
        // 没有选中时,如果数据存在就删除
        // 还有一点,若是选中了,下次再打开页面时,直接就把用户名显示出来
        var uname = document.querySelector('.uname');
        var remember = document.querySelector('.reme');
        if (localStorage.getItem('uname')) {
            uname.value = localStorage.getItem('uname');
            remember.checked = true;
        }
        // 复选框变化事件 
        remember.addEventListener('change', function () {
            // 如果选中记住用户名 就存储
            if (this.checked) {
                localStorage.setItem('uname', uname.value);
            } else {
                // 没选中就删除数据
                localStorage.removeItem('uname');
            }
        });

 

看下实现的效果

因为我在测试的时候，添加了数据并且记住了用户名，当我在重新打开页面时，显示如下

 

不勾选记住用户名

在重新打开页面时

此时，我换一个名字，记住。再打开页面时，是会显示用户名的。

 

 

这个功能与记住登录账号和密码是一样的原理。也可以试着写写。