字数

826 字

阅读时间

4 分钟

1.初识cookie

// 1.Cookie 是什么 // Cookie 全称 HTTP Cookie，简称 Cookie // 是浏览器存储数据的一种方式 //因为存储在用户本地，而不是存储在服务器上，是本地存储

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

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

![[Pasted image 20240618144554.png]] ![[Pasted image 20240618144626.png]]

2.cookie 的基本用法

// 1.写入 Cookie // document.cookie = 'username=zs'; // document.cookie = 'age=18'; //不能一起设置，只能一个一个设置 // document.cookie = 'username=zs; age=18'; // 2.读取 Cookie console.log(document.cookie); // 读取的是一个由名值对构成的字符串，每个名值对之间由“;” (一个分号和一个空格)隔开// username=zs; age=18

3.cookie的属性

1. Cookie 的名称(Name)和值(Value) // 最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值 // Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用decodeURIComponent() 解码 // document.cookie = 'username=alex'; // 一般名称使用英文字母，不要用中文，值可以用中文，但是要编码
2. 失效(到期)时间 // 对于失效的 Cookie，会被浏览器清除 //如果没有设置失效(到期)时间，这样的 Cookie 称为会话 Cookie // 它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失 // document.cookie = 'username=alex'; // 想长时间存在，设置 Expires 或 Max-Age // expires //值为 Date类型 // document.cookie = 'username=alex; expires=${new Date( // 2100-1-01 00:00:00' //)}; // max-age // 值为数字，表示当前时间+多少秒后过期，单位是秒 // document.cookie = 'username=alex; max-age=5';
3. Domain // Domain 限定了访问 Cookie 的范围(不同域名) // 使用US 只能读写当前域或父域的Cookie，无法读写其他域的 Cookie// document.cookie = 'username=alex; domain=www.imooc.com'; // www.imooc.com m.imooc.com //imooc.com 4.Path // Path 限定了访问 Cookie 的范围(同一个域名下) //使用US只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie // document.cookie = 'username=alex; path=/course/list'; // document.cookie = 'username=alex; path=/1.Cookie/';

当Name、Domain、Path 这3个字段都相同的时候，才是同一个 Cookie

// 5.HttpOnly // 设置了 HttpOnly 属性的 Cookie 不能通过US去访问 // 6.Secure 安全标志 // Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

4.初识 localstorage

• 存储大小限制：通常为5MB（每个源）。
• 特点：
  • 数据存储在客户端，没有过期时间，除非明确删除。
  • 只能在同一域名下的网页访问。
  • 适用于存储较大和长期的数据。

// 3.localStorage // console.log(localStorage); // setItem() localStorage.setItem('username', 'alex'); localStorage.setItem('username', 'zs'); localStorage.setItem('age'， 18);localStorage.setItem('sex', 'male'); // length // console.log(localStorage.length); // getItem() console.log(localStorage.getItem('username')); console.log(localStorage.getItem('age')); // 获取不存在的返回 null console.log(localStorage.getItem('name')); //console.log(localStorage); // removeltem() // localStorage.removeltem('username'); // localStorage.removeltem('age'); // 删除不存在的 key，不报错 // localStorage.removeltem('name');

贡献者

sunchengzhi

文件历史

最后编辑于 6 个月前查看完整历史

de5fa-fix:修改文件名 于 11/9/2024