本地数据存储 —— sessionStorage和localStorage

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

 

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

本地数据存储 —— sessionStorage和localStorage_第1张图片

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

 

sessionStorage

sessionStorage存储特点

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

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

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

四种常用的方法

以案例的形式看

结构

    
    
    
    
    
        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) —— 存储数据

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

本地数据存储 —— sessionStorage和localStorage_第2张图片

getItem( key ) —— 获取数据

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

本地数据存储 —— sessionStorage和localStorage_第3张图片

 本地数据存储 —— sessionStorage和localStorage_第4张图片

removeItem( key ) —— 删除数据

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

本地数据存储 —— sessionStorage和localStorage_第5张图片

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

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

 

 

localStorage

localStorage存储特点

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

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

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

四种常用方法

与sessionStorage的方法一样。

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

getItem( key ) —— 获取数据

removeItem( key ) —— 删除数据

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

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

本地数据存储 —— sessionStorage和localStorage_第6张图片

本地数据存储 —— sessionStorage和localStorage_第7张图片

 

 

记住用户名案例

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

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

这里用到了复选框的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');
            }
        });

 

看下实现的效果

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

本地数据存储 —— sessionStorage和localStorage_第8张图片

 

不勾选记住用户名

本地数据存储 —— sessionStorage和localStorage_第9张图片

在重新打开页面时

本地数据存储 —— sessionStorage和localStorage_第10张图片

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

本地数据存储 —— sessionStorage和localStorage_第11张图片

 

 

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

 

 

你可能感兴趣的:(#,Javascript基础,localStorage,sessionStorage,javascript)