Skip to content
字数
826 字
阅读时间
4 分钟

1.初识cookie

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

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

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

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

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

贡献者

The avatar of contributor named as sunchengzhi sunchengzhi

文件历史

撰写