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

一、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

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

        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);

四、cookie和storage的区别

1、出现时间

1. cookie：有JS的时候就有了
2. storage：有H5以后才有的

2、存储大小

1. cookie：4kb
2. storage：20MB

3、前后端交互（前端向后端发送请求）

1. cookie：交互时请求默认携带cookie
2. storage：交互式请求不会携带，除非前端人员配置传递

4、前后端操作

1. cookie：不管前后端语言都可以操作
2. storage：只能有前端语言来操作（JS）

5、过期时间

1. cookie：默认会话级，页面关闭，存储消失；可以通过手动配置
2. storage：不能通过手动配置

五、localStorage和sessionStorage的区别

• 过期时间

1. Localstorage：永久存储，除非手动清理
2. sessionstorage：会话级别，关闭页面，存储就失效