- Cookie
- Cookie 是什么
- Cookie 全称 HTTP Cookie,简称 Cookie
- 是浏览器存储数据的一种方式 本地存储
- 一般会自动随着浏览器每次请求发送到服务器端
- Cookie 有什么用
- 利用 Cookie 跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个网页的停留时间等
- 在浏览器中操作 Cookie
- 不要在 Cookie 中保存密码等敏感信息
- 写入cookie
- 语法是:document.cookie = '键=值',不能只写入键
- eg document.cookie = 'username=zs';
- 不能一起设置,只能一个一个设置
- 设置多个cookie时,只能通过多次调用document.cookie = '键=值” 的方式逐个添加
- 读取 Cookie
- console.log(document.cookie);
- 读取的是一个由名值对构成的字符串,每个名值对之间由“; ”(一个分号和一个空格)隔开
- eg username=zs; age=18
- Cookie的属性
- Cookie 的名称(Name)和值(Value)
- 创建 Cookie 时必须填写,其它属性可以使用默认值
- Cookie 的名称或值如果包含非英文字母,则写入时需要使用 encodeURIComponent() 编码,读取时使用 decodeURIComponent() 解码
- eg document.cookie = `username=${encodeURIComponent('张三')}`;
- 一般名称使用英文字母,不要用中文,值可以用中文,但是要编码
- 失效(到期)时间
- 对于失效的 Cookie,会被浏览器清除, 如果没有设置失效(到期)时间,这样的 Cookie 称为会话 Cookie,它存在内存中,当会话结束,也就是浏览器关闭时,Cookie 消失
- 想长时间存在,设置 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=${24 * 3600 * 30};
- 如果 max-age 的值是 0 或负数,则 Cookie 会被删除
- expires值为 Date 类型
- Domain 域
- Domain 限定了访问 Cookie 的范围(不同域名)
- 使用 JS 只能读写当前域或父域的 Cookie,无法读写其他域的 Cookie
- document.cookie = 'username=alex; domain=www.imooc.com';
- Path 路径
- Path 限定了访问 Cookie 的范围(同一个域名下)
- 使用 JS 只能读写当前路径和上级路径的 Cookie,无法读写下级路径的 Cookie
- 当 Name、Domain、Path 这 3 个字段都相同的时候,才是同一个 Cookie
- HttpOnly
- 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
- Secure 安全标志
- Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端
- Domain、Path、Secure 都要满足条件,还不能过期的 Cookie 才能随着请求发送到服务器端
- Cookie 的名称(Name)和值(Value)
- Cookie 的注意事项
- 前后端都可以创建 Cookie
- Cookie 有数量限制,每个域名下的 Cookie 数量有限,当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
- Cookie 有大小限制,每个 Cookie 的存储容量很小,最多只有 4KB 左右
- Cookie 是什么
- localStorage
- localStorage 也是一种浏览器存储数据的方式(本地存储),它只是存储在本地,不会发送到服务器端
- 单个域名下的 localStorage 总大小有限制
- localStorage 的基本用法
- setItem()
- localStorage.setItem('username', 'zs');
- length
- console.log(localStorage.length);
- getItem()
- console.log(localStorage.getItem('username'));
- 获取不存在的返回 null
- removeItem()
- localStorage.removeItem('username');
- 删除不存在的 key,不报错
- clear()
- localStorage.clear()
- clear方法,不管是否传递了参数,都会清除localStorage中的所有内容
- setItem()
- localStorage 的注意事项
- localStorage 的存储期限
- localStorage 是持久化的本地存储,除非手动清除(比如通过 js 删除,或者清除浏览器缓存),否则数据是永远不会过期的
- sessionStorage,当会话结束(比如关闭浏览器)的时候,sessionStorage 中的数据会被清空
- localStorage 键和值的类型
- localStorage 存储的键和值只能是字符串类型,不是字符串类型,也会先转化成字符串类型再存进去
- 不同的域名是不能共用 localStorage 的
- localStorage 的兼容性:IE7及以下版本不支持 localStorage,IE8 开始支持
- localStorage 的存储期限