【学习打卡】第2天 本地存储

课程名称：前端工程师2022版、 章节：本地存储 、讲师：Alex

课程内容：Cookie

• • 前后端都可以创建 Cookie
    

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

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

  • Cookie 的注意事项
    

  • Cookie 的名称（Name）和值（Value）
    

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

  • eg document.cookie = `username=${encodeURIComponent('张三')}`;
    

  • Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
    

  • 创建 Cookie 时必须填写，其它属性可以使用默认值
    

  • 失效（到期）时间
    

  • expires值为 Date 类型
    

  • )}`;
    

  •   '2100-1-01 00:00:00'
    

  • document.cookie = `username=alex; expires=${new Date(
    

  • max-age值为数字，表示当前时间 + 多少秒后过期，单位是秒
    

  • document.cookie = username=alex; max-age=${24 * 3600 * 30};
    

  • 如果 max-age 的值是 0 或负数，则 Cookie 会被删除
    

  • 想长时间存在，设置 Expires 或 Max-Age
    

  • 对于失效的 Cookie，会被浏览器清除, 如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie,它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失
    

  • Domain 域
    

  • document.cookie = 'username=alex; domain=www.imooc.com';
    

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

  • Domain 限定了访问 Cookie 的范围（不同域名）
    

  • Path 路径
    

  • 使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie
    

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

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

  • HttpOnly
    

  • 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
    

  • Secure 安全标志
    

  • Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端
    

  • Domain、Path、Secure 都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端
    

  • Cookie的属性
    

  • console.log(document.cookie);
    

  • 读取的是一个由名值对构成的字符串，每个名值对之间由“; ”（一个分号和一个空格）隔开
    

  • eg   username=zs; age=18
    

  • 读取 Cookie
    

  • 语法是：document.cookie = '键=值'，不能只写入键
    

  • eg  document.cookie = 'username=zs';
    

  • 不能一起设置，只能一个一个设置
    

  • 设置多个cookie时，只能通过多次调用document.cookie = '键=值” 的方式逐个添加
    

  • 写入cookie
    

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

  • 在浏览器中操作 Cookie
    

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

  • Cookie 有什么用
    

  • Cookie 全称 HTTP Cookie，简称 Cookie
    

  • 是浏览器存储数据的一种方式  本地存储
    

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

  • Cookie 是什么
    

• localStorage
  

  • localStorage 的存储期限
    

  • sessionStorage,当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空
    

  • localStorage 是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的
    

  • localStorage 键和值的类型
    

  • localStorage 存储的键和值只能是字符串类型,不是字符串类型，也会先转化成字符串类型再存进去
    

  • 不同的域名是不能共用 localStorage 的
    

  • localStorage 的兼容性：IE7及以下版本不支持 localStorage，IE8 开始支持
    

  • localStorage 的注意事项
    

  • setItem()
    

  • localStorage.setItem('username', 'zs');
    

  • length
    

  • console.log(localStorage.length);
    

  • getItem()
    

  • 获取不存在的返回 null
    

  • console.log(localStorage.getItem('username'));
    

  • removeItem()
    

  • 删除不存在的 key，不报错
    

  • localStorage.removeItem('username');
    

  • clear()
    

  • localStorage.clear()
    

  • clear方法，不管是否传递了参数，都会清除localStorage中的所有内容
    

  • localStorage 的基本用法
    

  • 单个域名下的 localStorage 总大小有限制
    

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

• 
  

学习心得：今天学习到了本地存储，掌握了cookie、kicalStorage、sessionStorage

学习截图：