window.sessionStorage与window.localStorage的使用方法与区别

最新推荐文章于 2024-04-01 14:01:04 发布

Running53

最新推荐文章于 2024-04-01 14:01:04 发布

阅读量1.9k

点赞数 1

分类专栏：前端 CSS HTML标签文章标签： javascript css html html5 css3

原文链接：https://blog.csdn.net/zbailing/article/details/95211041?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFr

版权

前端同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

HTML标签

15 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 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://blog.csdn.net/zbailing/article/details/95211041?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control

Running53

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
window.sessionStorage与window.localStorage的使用方法与区别

window.sessionStorage属性区别：localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。仅刷新页面不会删除数据。1、语法window.sessionStorage//window可以省略。保存数据语法：sessionStorage.setItem(‘key’, ‘value’);或sessionStor
复制链接

扫一扫