【学习笔记38】JavaScript中的本地存储

news2025/7/5 0:16:43

一、localStorage

浏览器的本地存储(永久存储), 打开浏览器存储上之后, 关闭浏览器, 信息还在
语法：window.localStorage.setItem(key, value)
注意: value的值必须为字符串
key的书写符合见名知意

        window.localStorage.setItem('ceshi1', '1111111');
        window.localStorage.setItem('ceshi2', '2222222');
        window.localStorage.setItem('ceshi3', '3333333');
        window.localStorage.setItem('ceshi4', '4444444');
        window.localStorage.setItem('ceshi5', '5555555');

在这里插入图片描述

1、删除语法

语法：window.localStorage.removeItem(key);

        window.localStorage.removeItem('ceshi1');

2、清除语法

语法：window.localStorage.clear();

        window.localStorage.clear();

3、获取语法

语法：window.localStorage.getItem(key)

        console.log(window.localStorage.getItem('ceshi3'));

二、sessionStorage

浏览器的临时存储
特点: 页面关闭, 直接清除数据

1、设置语法

语法：window.sessionStorage.setItem(key, value)
value的值必须为字符串

        window.sessionStorage.setItem('VX', '666@@@');

在这里插入图片描述

2、获取语法

        console.log(window.sessionStorage.getItem('VX'));   // 666@@@

3、删除语法

          window.sessionStorage.removeItem('VX');

4、清除语法

          window.sessionStorage.clear();

5、JSON的两个方法

JSON.stringify( )将其他类型的数据, 转为字符串格式
JSON.parse( ) 将字符串的数据类型还原

        // JSON的两个方法 
        var obj = [1, 2, 3, 4, 5];
        // 1. JSON.stringify()  将其他类型的数据, 转为字符串格式
        window.sessionStorage.setItem('OBJ', JSON.stringify(obj));
        
         // 2. JSON.parse() 将字符串的数据类型还原
        var newObj = JSON.parse(window.sessionStorage.getItem('OBJ')); 
        console.log(newObj)

三、cookie

cookie只能在用服务器启动的页面中正常使用
解决: vscode安装Live Server插件
语法: document.cookie = 'key=value'

1、设置一条cookie

        document.cookie = 'QQ=12345';

在这里插入图片描述

2、设置多条cookie

        document.cookie = 'QQ=123456789';
        document.cookie = 'pwd=987654321';

3、设置一条带有过期时间的cookie

        /**
         *  不管你设置的是那个时区的时间, (我们是东八区)
         *
         *  它都会按照世界标准时间去设置
         *
         *  如果我们想要设置一个过期时间的话, 需要先往后调整8小时; 然后加上你需要的过期时间
        */

        var timer = new Date();
        document.cookie = 'VX=123456789;expires=' + timer;

在这里插入图片描述

4、案例

需求: 我需要设置一条30秒后过期的cookie

获取当前时间
将当前时间往后调整8小时
把调整后的时间，加上我们设置的过期时间

        document.cookie = 'QQ=123456789';
        document.cookie = 'pwd=987654321';

        // 设置30秒
        var timer = new Date();
        timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30);
        document.cookie = 'VX=6666;expires=' + timer;

        // 获取 cookie
        console.log(document.cookie);