JavaScript基础： localStorage和sesssionSotrage 区别

最新推荐文章于 2024-09-12 13:42:17 发布

小猪弟

最新推荐文章于 2024-09-12 13:42:17 发布

阅读量492

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript localStorage sessionStorage

本文链接：https://blog.csdn.net/u011863822/article/details/124590318

版权

JavaScript 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

在访问网站的时候，会发现有些数据本身就存在浏览器中一样，比如常见的一种就是账户密码自动记录等。

当然这个也是随着时代的发展而慢慢衍生的，后面就引入了一个本地存储这个概念。为什么要有本地存储呢，因为i现在的网页应用越来月普遍，同时也变得越来越复杂，为了满足各种各样的需求，所以就需要将一些常用的数据存储在本地。所以整体来说本地存储特征:

数据存储在用户的浏览器中。
设置，读取方便，甚至页面刷新都不会丢失数据。

这个就需两个不同的存储方式了：

第一种： sessionStorage

第二种：localStorage

存储的时候格式： key： value方式

这两个存储数据value时只能字符串，如果时对象的话就需要JSON.stringify()编码后存储。

既然有两个，也说明两者也是有区别的：

sessionStorage
- 存储的数据最大5M
- 生命周期在关闭浏览器窗口的时候就消亡
localStorage
- 存储的数据最大20M
- 存储数据在本地，除非你删除或者清理，不然就一直存在。

sessionStorage

存储在 sessionStorage 里面的数据在页面会话结束时会被清除。打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage，关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

应该注意，存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就是说 http://example.com 与 https://example.com 的 sessionStorage 相互隔离。

三个方法：

方法	描述
sessionStorage.setItem(key,value)	存储数据，如果key值不变再次存储的话，机会存储新的值覆盖老的值
sessionStorage.getItem(key)	得到存储的值
sessionStorage.removeItem(key)	删除名的存储值
sessionStorage.clear()	清除所有的存储值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>


<input class="name" name="name" type="text" >
<button id="add">添加session数据</button>
<button id="del">删除session数据</button>
<button id="clear">清除session数据</button>


<script>
    var ele=document.querySelector('.name');
    var b_add=document.querySelector('#add');
    var b_del=document.querySelector('#del');
    var b_clear=document.querySelector('#clear');
    b_add.addEventListener('click',function () {
        var name_text=ele.value;
        //这个可以添加很多，演示一个所以就写死了， 如果在对name赋值就会被新值覆盖
        window.sessionStorage.setItem('name',name_text);
    })

    b_del.addEventListener('click',function () {
        window.sessionStorage.removeItem('name');
    })
    b_clear.addEventListener('click',function () {
        window.sessionStorage.clear();
    })

</script>
</body>
</html>

在这里插入图片描述

可以看出在sessionStrage存储了一个值，但是相同的地址再打开一个页面其不存在的，当然如果刷新不关闭这个页面还是存在的。

localStorage

这个数据保存再本地，只要访问这个网站，其存储的数据没有被删除，只要时这个这个域名都会得到这个存储的值。

方法	描述
localStorage.setItem(key,value)	存储数据，如果key值不变再次存储的话，机会存储新的值覆盖老的值
localStorage.getItem(key)	得到存储的值
localStorage.removeItem(key)	删除名的存储值
localStorage.clear()	清除所有的存储值

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>


<input class="name" name="name" type="text" >
<button id="add">添加session数据</button>
<button id="del">删除session数据</button>
<button id="clear">清除session数据</button>


<script>
    var ele=document.querySelector('.name');
    var b_add=document.querySelector('#add');
    var b_del=document.querySelector('#del');
    var b_clear=document.querySelector('#clear');
    b_add.addEventListener('click',function () {
        var name_text=ele.value;
        //这个可以添加很多，演示一个所以就写死了， 如果在对name赋值就会被新值覆盖
        window.localStorage.setItem('name',name_text);
    })

    b_del.addEventListener('click',function () {
        window.localStorage.removeItem('name');
    })
    b_clear.addEventListener('click',function () {
        window.localStorage.clear();
    })

</script>
</body>
</html>

在这里插入图片描述

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>


<input class="name" name="name" type="text" >
<input id="che"   type="checkbox"> <label  for="che">是否记录用户名</label>

<script>
    var ele=document.querySelector('.name');
    var che=document.querySelector('#che');

    if(window.localStorage.getItem('name')){
        ele.value=window.localStorage.getItem('name');;
        che.checked=true;
    }

    che.addEventListener('change',function () {
        if(che.checked){
            window.localStorage.setItem('name',ele.value)
        }else {
            window.localStorage.removeItem('name')
        }
    })

</script>
</body>
</html>