JavaScript本地存储localStorage和sessionStorage

最新推荐文章于 2022-07-31 11:07:36 发布

grt要一直一直努力呀

最新推荐文章于 2022-07-31 11:07:36 发布

阅读量296

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS基础文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/qq_44870115/article/details/120102511

JS基础专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了浏览器的本地存储机制，包括sessionStorage和localStorage的使用方法。sessionStorage用于临时存储同一窗口的数据，关闭浏览器后数据消失；而localStorage则提供持久化的存储空间，即使浏览器关闭数据依然保留。两者都以键值对形式存储，且只支持字符串存储，可使用JSON.stringify()转换对象。示例代码展示了如何进行数据的增删改查操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地存储

将数据存储在用户浏览器中。
设置、读取方便。甚至页面刷新都不会丢失数据。
存储容量大，sessionStorage约5M，localStorage约20M。
只能存储字符串，可以将对象JSON.stringify()编码后存储。

sessionStorage数据的存储与获取

生命周期为关闭浏览器窗口。(即存储在sessionStorage中的数据，一关闭浏览器就不存在。)
在同一个窗口(页面)下数据是可以共享的。
以键值对的形式存储使用。
存储数据

sessionStorage.setItem(key,value)

在这里插入图片描述
获取数据

sessionStorage.getItem(key)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
</body>
<script>
    var ipt = document.querySelector('input');
    var btn1 = document.querySelector('.set')
    btn1.addEventListener('click', function() {
        //当点击了存储数据的按钮，就把input中的值存储起来。
        var val = ipt.value
        sessionStorage.setItem('uname', val)
            //要想存储多个数据，直接从这里往后追加即可。
        sessionStorage.setItem('pwd', val)
    })
    var btn2 = document.querySelector('.get')
    btn2.addEventListener('click', function() {
        //当点击了获取数据的按钮，就获取存储的值。
        console.log(sessionStorage.getItem('uname'));
    })
    var btn3 = document.querySelector('.remove')
    btn3.addEventListener('click', function() {
        //删除值
        sessionStorage.removeItem('uname')
    })
    var btn4 = document.querySelector('.del')
    btn4.addEventListener('click', function() {
        //清除所有数据
        sessionStorage.clear()
    })
</script>

</html>