简单理解JS中的本地存储

最新推荐文章于 2024-04-29 20:55:31 发布

即将拥有人鱼线彭于晏

最新推荐文章于 2024-04-29 20:55:31 发布

阅读量283

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/TutouPYY/article/details/106460466

版权

本地存储

一、介绍

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M，localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify()编码后存储

window.sessionStorage

生命周期为关闭浏览器窗口

在同一窗口（页面）下数据可以共享

以键值对的形式存储

1、存储数据

sessionStorage.setItem('key',value);

2、获取数据

sessionStorage.getItem('key');

3、删除数据

sessionStorage.removeItem('key');

4、删除所有数据(清空数据)

sessionStorage.clear();

window.localStorage

生命周期永久生效，除非手动删除否则关闭页面也会存在

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

1、存储数据

localStorage.setItem('key',value);

2、获取数据

localStorage.getItem('key');

3、删除数据

localStorage.removeItem('key');

4、删除所有数据

localStorage.clear();

记住用户简易案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="username"><input type="checkbox" name="" id="remember">记住我

    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if(localStorage.getItem('username')){
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }

        

        remember.addEventListener('change', function () {
            
            if(this.checked){
                localStorage.setItem('username',username.value);
            }else{
                localStorage.removeItem('username');
            }  
        })
    </script>
</body>
</html>