1.window.sessionStorage
(1).生命周期为关闭浏览器窗口(关闭浏览器之后,所存储的数据也就随之清空)

(2).以键值对形式存取使用

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

//存储数据
sessionStorage.setItem(key,val)

//获取数据
sessionStorage.getItem(key)

//删除数据
sessionStorage.removeItem(key)

//清除所有数据
sessionStorage.clear()

本地代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="del">删除数据</button>
    <button class="clear">清空全部数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var del = document.querySelector('.del');
        var clear = document.querySelector('.clear');

        set.addEventListener('click', function(){
            var value = ipt.value;
            sessionStorage.setItem('uname', value);
            sessionStorage.setItem('uage', value);
            sessionStorage.setItem('usex', value);
        })
        get.addEventListener('click',function(){
            var getValue = sessionStorage.getItem('uname');
            console.log(getValue);
        })
        del.addEventListener('click',function() {
            sessionStorage.removeItem('uname');
            sessionStorage.removeItem('uage');
        })
        clear.addEventListener('click',function(){
            sessionStorage.clear();
        })
    </script>
</body>
</html>

演示图片:
sessionStorage.gif

2.window.localStorage
(1).生命周期永久生效,除非手动删除,否者关闭页面也会存在

(2).以键值对形式存取使用

(3).在多窗口(页面)(同一浏览器)下数据可以共享

//存储数据
localStorage.setItem(key,val)

//获取数据
localStorage.getItem(key)

//删除数据
localStorage.removeItem(key)

//清除所有数据
localStorage.clear()

区别:
(1)声明周期不同
(2)sessionStorage存储的数据只能在同一窗口下共享,localStorage存储的数据能够在多窗口下共享

Last modification:May 24th, 2021 at 06:07 pm
如果觉得我的文章对你有用,请随意赞赏