本地存储特性

数据存储在用户浏览器中

设置, 读取方便,甚至页面刷新数据不丢失

容量较大,sessionStorage约为5M,localStorage约为20M

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

window.sessionStorage

特        点

生命周期为关闭窗口

生命周期为关闭窗口

同一窗口下数据共享

以键值对形式存储

案例:

html部分代码:

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

存储数据语法:window.sessionStorage.setItem(key,value)
window可以省略
通过下方代码,存储了一个key为uname,值为输入框中内容的键值对,运行程序查看效果:

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

js sessionStorage本地存储_数据

可见,数据已经成功存储,并且,即使刷新页面,数据仍然存在

获取数据语法:window.sessionStorage.getItem(key,value)
window可以省略

var get=document.querySelector('.get');
    get.addEventListener('click',function () {
        var uname = sessionStorage.getItem('uname');
        console.log(uname);
    })

当我点击获取数据按钮后成功获取到了数据

js sessionStorage本地存储_数据_02


删除数据语法:window.sessionStorage.removeItem(key,value)
window可以省略

var remove=document.querySelector('.remove');
    remove.addEventListener('click',function () {
        sessionStorage.removeItem('uname');
    })

点击删除数据按钮,成功删除

js sessionStorage本地存储_获取数据_03


清空数据语法:window.sessionStorage.removeItem(key,value)
window可以省略

var del = document.querySelector('.del');
    del.addEventListener('click',function () {
        sessionStorage.clear();
    })

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存取数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
    var input = document.querySelector('input');
    var set = document.querySelector('.set');
    set.addEventListener('click', function () {
        //当我们点击了之后们就可以把表单里面的值存储起来
        var val = input.value;
        sessionStorage.setItem('uname', val);
        sessionStorage.setItem('password', val);
    })
    var get=document.querySelector('.get');
    get.addEventListener('click',function () {
        var uname = sessionStorage.getItem('uname');
        console.log(uname);
    })
    var remove=document.querySelector('.remove');
    remove.addEventListener('click',function () {
        sessionStorage.removeItem('uname');
    })
    var del = document.querySelector('.del');
    del.addEventListener('click',function () {
        sessionStorage.clear();
    })
</script>
</body>
</html>