JS 本地存储和会话存储

最新推荐文章于 2024-10-01 15:28:54 发布

zbailing

最新推荐文章于 2024-10-01 15:28:54 发布

阅读量2.7k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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