本地存储

Cookie 是什么

　　　　Cookie 全称 HTTP Cookie ，是浏览器存储数据的一种方式

　　　　因为存储在用户本地，而不是服务器上，属于本地存储

　　　　一般会自动随着浏览器每次请求发送到服务器端

　　　　利用 Cookie 可以跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个页面停留的时间等

　　　　不要在 Cookie 中保存密码等敏感信息

在浏览器中操作 Cookie

JS 写入 Cookie

document.cookie = "cookie名 = 值";

　　赋值会新增cookie，但只能一个一个地赋值，如果cookie名重复会覆盖前面的值

读取 Cookie

//得到的值是一个由名值对组成的字符串，每个名值对之间用； （一个分号和一个空格）隔开
document.cookie;
//username=james; password=123456

Cookie 的属性
- 名称（Name）和值（Value）

　　　　　　创建 Cookie 时必须填写，Cookie的名称和值如果包含非英文字母，写入时需要用 encodeURIComponent（）编码，读取时使用 decodeURIComponent（）解码

　　　　　　一般名称使用英文字母，值可以用中文但是要编码

　　<script>
        const username = '张三';
        const username1 = encodeURIComponent(username);
        document.cookie = 'username=' + username1;
    </script>

- Cookie 的失效（到期）时间

　　　　　　对于失效的 Cookie 会被浏览器清除

　　　　　　如果没有设置失效（到期）时间，这样的 Cookie 被称为会话 Cookie，会话 Cookie 存储在内存中，浏览器关闭时 Cookie会一起消失

　　　　　　如果想长时间存在，可以设置 Expires 或 Max-Age

- - expires 属性的值应该是一个GMT格式的日期字符串

var date = new Date();
date.setTime(date.getTime() + (24*60*60*1000)); // 设置日期为24小时后
var expires = "expires=" + date.toUTCString(); // 将日期转换为GMT格式

document.cookie = "username=John Doe; " + expires + ";path=/";

- - max-age 的值为数字，表示当前时间 + 多少秒之后过期，单位是秒，如果值为0 或者负数，则Cookie会被删除

document.cookie = "username=zhangsan; max-age=5"; // 5秒之后
document.cookie = `username=zhangsan; max-age=${24 * 3600 * 30}`; // 一个月之后
document.cookie = "username=zhangsan; max-age=0";
document.cookie = "username=zhangsan; max-age=-1";//立即删除

- Domain 域

　　　　　　Domain 限定了访问 Cookie 的范围（不同域名），不同域名下的 Cookie 不能相互访问，如果想都能访问，需要修改 Domain 为父域

　　　　　　JS只能读写当前域或父域的Cookie，无法读取其他域的Cookie

// 当前域
document.cookie = "username=www-zhangsan; domain=www.bilibili.com";
// 父域
document.cookie = "username=.-zhangsan; domain=.bilibili.com";

- Path 路径

　　　　　　Path限定了访问Cookie的范围（同一个域名下）

　　　　　　如果定义 Cookie 时不加 path，默认只有在当前页面下才能访问当前页面的 Cookie

　　　　　　如果设置path=/ ，则表示整个网站中都可以访问Cookie

　　　　　　同理，设置path=/blog ，表示只能在 /blog 路径下才能访问Cookie

　　　　　　当Name、Domain、Path这三个字段都相同的时候，才是同一个Cookie，才会存在覆盖问题

- HttpOnly：设置了 HttpOnly 属性的 Cookie 不能通过 JS 访问
- Secure 安全标志：Secure 限定了只有在使用 https 而不是 http 的情况下才可以从客户端发送给服务端
Cookie 可以发送到服务端的条件：Domain、Path、Secure都满足条件，且没有过期的 Cookie 才能随着请求发送给服务端
Cookie 的封装
- 写入 Cookie

// 设置cookie
const setCookie = (name, value, { domain, path, maxAge, secure } = {}) => {
  // encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
  // 该函数不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )
  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  // max-age: 以秒为单位，表示 cookie 有效期，即 cookie 会在 max-age 秒后自动删除。
  if (typeof maxAge === "number") {
    cookieString += `; max-age=${maxAge}`;
  }
  // domain: 指定 cookie 生效的域名。默认情况下，cookie 仅在当前域名下有效。
  if (domain) {
    cookieString += `; domain=${domain}`;
  }
  // path: 指定 cookie 生效的路径。默认情况下，cookie 仅在当前路径下有效。
  if (path) {
    cookieString += `; path=${path}`;
  }
  // secure: 一个布尔值，表示 cookie 是否通过安全的 HTTPS 连接传输。默认情况下，cookie 通过 HTTP 传输。
  if (secure) {
    cookieString += `; secure`;
  }
  // document.cookie 属性可以设置和获取 cookie。
  document.cookie = cookieString;
};

- 读取 Cookie

// 通过name, 读取cookie
const getCookie = (name) => {
    // 将name进行编码
    name = encodeURIComponent(name);
    // 读取cookie, 转换成数组
    const cookieArray = document.cookie.split("; ");
    // 遍历数组
    for (const item of cookieArray) {
        const [cookieName, cookieValue] = item.split("=");
        if (cookieName === name) {
            // 将cookieValue进行解码, 并返回
            return decodeURIComponent(cookieValue);
        }
    }
    return;
};

- 删除 Cookie

// 删除cookie
const removeCookie = (name, { domain, path } = {}) => {
    // 设置已过期，系统会立刻删除cookie
    setCookie(name, "", { domain, path, maxAge: -1 });
};

Cookie 的注意事项

　　　　前后端都可以创建 Cookie

　　　　Cookie 有数量限制，每个域名下的 Cookie 数量有限，当超过单个域名限制后，再设置 Cookie ，浏览器会清除之前的 Cookie 设置

　　　　Cookie 有大小限制，每个 Cookie 的存储量很小，最多只有 4KB 左右

localStorage（本地存储）

　　　　localStorage 也是一种浏览器存储数据的方式，只存储在本地中，不会发送到服务器端

　　　　单个域名下得 localStorage 总大小有限制，一般是 5MB，超出限制会导致数据覆盖丢失

浏览器中操作 localStorage

localStorage的基本用法
- 添加内容：使用 setItem 方法添加

//两个参数，一个名字，一个值
localStorage.setItem("username", "zhangsan");
//同名也会引起覆盖
localStorage.setItem("username", "zhangsan");
localStorage.setItem("username", "lisi");
//简便的写法
localStorage.name = "tony";
localStorage.age = 50;

- 获取内容：使用 getItem 方法获取

//只需要一个参数：名称
localStorage.setItem("username", "zhangsan");
localStorage.setItem("username", "lisi");
localStorage.setItem("sex", "male");
localStorage.setItem("age", 18);

console.log(localStorage.getItem("username")); // lisi
console.log(localStorage.getItem("sex")); // male
console.log(localStorage.getItem("sex1111")); //不存在返回 null
console.log(localStorage.username); // 简写形式 lisi

- 删除内容：使用 removeItem 方法获取

//只需要一个参数：名称
localStorage.setItem("username", "zhangsan");
localStorage.setItem("sex", "male");
localStorage.setItem("age", 18);

localStorage.removeItem("age");
console.log(localStorage.length); // 2
localStorage.removeItem("age111"); // 名称不存在，不会报错
console.log(localStorage.length); //2

delete localStorage.age;//简写形式

- 其他操作

//查看 localStorage 有多少条数据
console.log(localStorage.length);

//清空 localStorage 的内容
localStorage.clear();
console.log(localStorage.length); // 0

loaclStorage 的注意事项
- localStorage 的存储期限：localStorage 是持久化的本地存储，除非手动清除（如JS删除、浏览器清除等），否则数据永远不会过期
- 清除 localStorage 的几种方式：通过 JS （clear 和 removeItem 方法）和通过浏览器（手动清除 localStorage 数据或浏览器设置清除记录）
- localStorage 和 sessionStorage 的区别：会话结束（如浏览器关闭）时，sessionStorage 中的数据会被清空，但是基本用法与 localStorage 相同
- localStorage 键和值的类型：只能是字符串类型，不是字符串也会先转化成字符串再存进去，使用String()
- 需要存对象和数组的解决方案：数组和对象转成JSON字符串，JSON.stringify（数组/对象）；JSON字符串转对象/数组，JSON.parse（字符串）

//存储对象
<script>
    var obj = {
        username: "zhagnsan",
        age: 19,
        sex: "male",
        hobby: "study",
    };
    objString = JSON.stringify(obj);
    console.log(objString); // 字符串
    localStorage.setItem("obj", objString);
    objString = localStorage.getItem("obj");
    obj = JSON.parse(objString);
    console.log(obj); // 对象
</script>

//存储数组
<script>
    arr = ["one", "two", "three", "four", "five"];
    arrString = JSON.stringify(arr);
    console.log(arrString); // 字符串
    localStorage.setItem("arr", arrString);
    arrString = localStorage.getItem("arr");
    arr = JSON.parse(arrString); // 数组
    console.log(arr);
</script>

- 不同域名下不能共用 localStorage
- localStorage 的兼容性：IE7 及以下版本不支持 localStorage ，IE8 开始支持

Cookie、localStorage、sessionStorage之间的区别

Cookie 会在浏览器和服务器之间进行传递，localStorage 和 sessionStorage 不会发送给服务器，仅在本地保存
Cookie 存储的数据小，一般不超过 4KB 。localStorage 和 sessionStorage 存储大小一般在 5MB 左右
Cookie 可以通过自带的属性设置有效期，到期自动删除，localStorage 需要手动删除，sessionStorage 再会话结束是会自动删除
Cookie 和 localStorage 在同源窗口中是共享的，sessionStorage 在不同的窗口中不共享

posted @ 2023-12-20 18:58 波波波维奇～阅读(31) 评论(0) 收藏举报

刷新页面返回顶部

geol4

本地存储

公告