JavaScript基础: localStorage和sesssionSotrage 区别

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

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

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

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

第一种: sessionStorage

第二种:localStorage

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

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

既然有两个,也说明两者也是有区别的:

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

sessionStorage

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

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

应该注意,存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就是说 http://example.comhttps://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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值