JS 本地存储 和 会话存储

window.sessionStorage属性

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。仅刷新页面不会删除数据。

1、语法

window.sessionStorage

//window可以省略。

保存数据语法:

sessionStorage.setItem('key', 'value');

sessionStorage.key = 'value';

读取数据语法:

var data = sessionStorage.getItem('key');

var data = sessionStorage.key;

删除指定键的数据语法:

sessionStorage.removeItem('key');

删除所有数据:

sessionStorage.clear();

2、实例

使用sessionStorage创建一个本地存储的name/value对,name='lastname',value='小苹果',然后检索lastname的值,并插入到id='result'的元素上:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        html,body {
            width: 100%; height: 100%;
        }
        body {
            margin: 0;
            padding: 50px;
        }
    </style>
</head>
<body>
<div id="result"></div>
<button onclick="save()">save</button>
<button onclick="remove()">remove</button>

<script>
    if (typeof(sessionStorage) !== undefined) { //检测浏览器支持
        function get(){
            if (sessionStorage.getItem('lastname')) {
                document.getElementById('result').innerHTML = sessionStorage.getItem('lastname'); //检索
            } else {
                document.getElementById('result').innerHTML = '没有值';
            }
        }
        get();

        function save() {
            sessionStorage.setItem('lastname', '小苹果'); //存储
            get()
        }
        function remove() {
            //sessionStorage.removeItem('lastname');
            sessionStorage.clear();
            get()
        }
    } else {
        document.getElementById('result').innerHTML = '您的浏览器不支持sessionStorage';
    }
</script>
</body>
</html>

window.localStorage属性

localStorage属性在浏览器窗口关闭后还保留数据,该数据对象没有过期时间,明年都能用,除非你手动删除。

1、语法同window.sessionStorage属性

2、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        html,body {
            width: 100%; height: 100%;
        }
        body {
            margin: 0;
            padding: 50px;
        }
    </style>
</head>
<body>
<div id="result"></div>
<button onclick="save()">save</button>
<button onclick="remove()">remove</button>

<script>
    if (typeof(localStorage) !== undefined) { //检测浏览器支持
        function get(){
            if (localStorage.getItem('lastname')) {
                document.getElementById('result').innerHTML = localStorage.getItem('lastname');//检索
            } else {
                document.getElementById('result').innerHTML = '没有值';
            }
        }
        get();

        function save() {
            var s = localStorage.setItem('lastname', '小苹果');//存储
            console.log(s);
            get()
        }
        function remove() {
            //sessionStorage.removeItem('lastname');
            var r = localStorage.clear();
            console.log(r);
            get()
        }
    } else {
        document.getElementById('result').innerHTML = '您的浏览器不支持localStorage';
    }
</script>
</body>
</html>

原文链接:

https://www.runoob.com/jsref/prop-win-sessionstorage.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值