本地存储sessionStorage和localStorage（含案例）

最新推荐文章于 2023-06-26 15:56:01 发布

Star,

最新推荐文章于 2023-06-26 15:56:01 发布

阅读量558

点赞数

分类专栏：前端综合文章标签： js

本文链接：https://blog.csdn.net/weixin_45646245/article/details/109253337

版权

前端综合专栏收录该内容

9 篇文章 0 订阅

订阅专栏

localStorage和sessionStorage都是本地存储。

为什么要使用本地存储呢？

答：因为在有些情况下，浏览器并不需要和服务器交流；比如一个备忘录的页面，它其实只需要将数据存储下来方便用户在忘记的时候查看即可，并不需要其他更多的与服务器的交流。当然我们也可以将其存储到服务器上去，但这样会增加服务器的负担，所以这个时候最好的选择是使用本地存储。也就是将用户的一些数据存到本地（即浏览器）

本地存储的特点：

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

window.sessionStorage： 它属于window对象，window可省略

生命周期为关闭浏览器
在同一个窗口（页面）下的数据可以共享
以键值对形式存储使用

常用方法：

sessionStorage.setItem(key, value) ：存储数据
sessionStorage.getItem(key) ：获取数据
sessionStorage.removeItem(key) ：删除数据
sessionStorage.clear() ：删除所有数据

window.localStorage : 它属于window对象，window可省略

生命周期永久生效，即使关闭浏览器依然存在，除非手动删除
可以多窗口（页面）共享数据，同一浏览器可以共享数据
以键值对形式存储使用

常用方法：

localStorage.setItem(key,value) ：存储数据
localStorage.getItem(key) ：获取数据
localStorage.removeItem(key) ：删除数据
localStorage.clear() ：清空数据 / 删除所有数据

记住用户名案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记住用户名案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #username {
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <input type="text" id="username" />
    <input type="checkbox" id="check" /> 记住用户名
</body>
<script>
    var username = document.querySelector('#username');
    var check = document.querySelector('#check');
    check.checked = false;
    // 先看看localStorage里是否已有用户名，有就直接拿出来放到text框中，且复选框选中
    if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username');
        check.checked = true;
    }
    // 监听复选框是否改变
    check.addEventListener('change', function() {
        if (this.checked) {
            // 如果复选框被选中，则将用户名存入localStorage中
            localStorage.setItem('username', username.value);
        } else {
            // 复选框未被选中，则清空用户名
            localStorage.removeItem('username');
            check.checked = false;
        }
    })
</script>

</html>

Star,

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
本地存储sessionStorage和localStorage（含案例）

localStorage和sessionStorage都是本地存储。为什么要使用本地存储呢？答：因为在有些情况下，浏览器并不需要和服务器交流；比如一个备忘录的页面，它其实只需要将数据存储下来方便用户在忘记的时候查看即可，并不需要其他更多的与服务器的交流。当然我们也可以将其存储到服务器上去，但这样会增加服务器的负担，所以这个时候最好的选择是使用本地存储。也就是将用户的一些数据存到本地（即浏览器）本地存储的特点：数据存储在用户浏览器中设置、读取方便，甚至页面刷新也不会丢失容量较大，sessio
复制链接

扫一扫