JavaScript学习笔记（三十七）——本地存储和cookie_javascript document.cookie path 本地-CSDN博客

本文链接：https://blog.csdn.net/qq_45268602/article/details/108700626

我们打开浏览器，鼠标右击->检查->Application面板，在这里我们可以看到
在这里插入图片描述

本地存储

是HTML5中增加的一个浏览器端的存储方式，包括localStorage、sessionStorage和cookie。

localStorage

localStorage是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端（浏览器)，属于本地持久层储存，容量很大(20M左右)，以域名划分

使用方法：
1、保存

localStorage.setItem(“key”, “value”);
- (1)key：表示存储的键名
- (2)value：表示存储的值
  - localStorage只能存储字符串，如果需要存储对象、数组，需要将其转为字符串
  - 当存储的数据的键名重复，则将后来的覆盖原来的，如果不重复，则添加到localStorage中

2、获取

localStorage.getItem(“key”);
- 通过键名获取

3、移除一个

localStorage.removeItem(“key”);
- 通过键名删除一条信息

4、移除所有

localStorage.clear();
- 不需要带参数，不表示清除所有

演示：

保存一条数据：localStorage.setItem(“a”,“1”);
保存一条数据，值是一个数组：localStorage.setItem(“arr”, JSON.stringify([1, 2, 3, 4]));
保存一条数据，值是一个对象：localStorage.setItem(“obj”, JSON.stringify({“name”:“zhangsan”, “age”:20}));
获取一条数据：console.log(localStorage.getItem(“a”));
移除一条数据：localStorage.removeItem(“a”);
清除所有数据：localStorage.clear();

sessionStorage

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了，刷新不会清空。

使用方法：
1、保存

sessionStorage.setItem(“key”, “value”);
- (1)key：表示存储的键名
- (2)value：表示存储的值
  - sessionStorage只能存储字符串，如果需要存储对象、数组，需要将其转为字符串
  - 当存储的数据的键名重复，则将后来的覆盖原来的，如果不重复，则添加到sessionStorage中

2、获取

sessionStorage.getItem(“key”);
- 通过键名获取

3、移除一个

sessionStorage.removeItem(“key”);
- 通过键名删除一条信息

4、移除所有

sessionStorage.clear();
- 不需要带参数，不表示清除所有

演示：

保存一条数据：sessionStorage.setItem(“a”,“1”);
保存一条数据，值是一个数组：sessionStorage.setItem(“arr”, JSON.stringify([1, 2, 3, 4]));
保存一条数据，值是一个对象：sessionStorage.setItem(“obj”, JSON.stringify({“name”:“zhangsan”, “age”:20}));
获取一条数据：console.log(sessionStorage.getItem(“a”));
移除一条数据：sessionStorage.removeItem(“a”);
清除所有数据：sessionStorage.clear();

cookie

cookie是英文曲奇、小甜饼的意思
HTTP协议是一个无状态的协议，状态指的是连接会不会持久保持
cookie是HTTP协议的一部分，HTTP协议对cookie有规定
cookie是浏览器端的存储方式，同时也是一个请求头字段
cookie由服务器设置，由前端存储 (通过JS脚本也可以进行cookie的操作)

通过JS脚本操作cookie语法：
1、设置cookie

document.cookie = “name=value”;
或
document.cookie = “name=value;expires”;
或
document.cookie = “name=value;expires;path”;

2、获取cookie

document.cookie;

3、移除cookie，只能一次移除一条，没有一次移除全部的方法

document.cookie = “name=value;expires;path”;

演示：

设置第一条cookie：document.cookie = “a=1”;
设置第二条cookie：document.cookie = “b=2;max-age=100000;”;
设置第三条cookie：document.cookie = “c=3;max-age=100000;path=/”;
获取cookie：console.log(document.cookie);
移除一条cookie：document.cookie = “c=3;max-age=-1;path=/”;

封装cookie

为了方便操作cookie，我们将对cookie的保存、获取、移除方法封装。

let COOKIE = {
    // 封装cookie的操作方法
    setCookie(name, value, maxAge=0, path="/") {
        document.cookie = name + "=" + value + ";max-age=" + maxAge + ";path=" + path 
    },
    getCookie(name) {
        // 获取cookie
        var str = document.cookie;
        // 把cookie以 "; " 进行分隔
        var arr = str.split("; ");
        // 循环数组
        for (var i = 0; i < arr.length; i++) {
            // 以等号分隔
            var key = arr[i].split("=")[0];
            var value = arr[i].split("=")[1];
            if (key === name) {
                return value;
            }
        }
    },
    removeCookie(name, path) {
        document.cookie = name+"=1;max-age=-1;path=" + path;
    }
}

使用封装好的cookie，操作cookie：

<!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>
    <script src="COOKIE.js"></script>
    <script>
        // 设置cookie，两个js的path不同
        COOKIE.setCookie("js", "erjieduan", 100000);
        COOKIE.setCookie("js", "erjieduan", 100000, "./");
        COOKIE.setCookie("js1", "erjieduan", 100000, "./");
        
        // 获取cookie
        let js = COOKIE.getCookie("js");
        console.log(js);
        // 移除cookie
        COOKIE.removeCookie("js", "/");
    </script>
</body>
</html>