本地存储

还有需要补充的内容！！！

本地存储的三种方式

1、localStorage：永久本地存储

  • 本地存储的数据永远存在
  • localStorage.setItem(key,value); // 设置数据(属性值 value 会默认 toString())
    • 属性值为引用数据类型是需要特殊处理(eg:{}.toString() ==> [object Object])
    • localStorage.setItem(obj1,JSON.stringify({name:”123”,age:18}))
    • localStorage.getItem(JSON.parse(obj1)
  • localStorage.getItem(key); // 获取指定数据
  • localStorage.removeItem(key); // 清除本地存储的某一条数据
  • localStorage.clear(); // 清除全部本地存储中的数据

2、sessionStorage：临时存储,页面关闭的时候临时存储的数据会被删除

3、Cookie

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

  • Cookie 主要用于以下三个方面
    • 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
    • 个性化设置（如用户自定义设置、主题等）
    • 浏览器行为跟踪（如跟踪分析用户行为等）

  • Cookie 的属性

    • Name、Value
    • Domain：域名
      • 指定了哪些主机可以接受 Cookie。
        • 如果不指定，默认为 origin，不包含子域名；
        • 如果指定了 Domain，则一般包含子域名。因此，指定 Domain 比省略它 的限制要少。
          • 例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如 developer.mozilla.org）。
          • 当前大多数浏览器遵循 RFC 6265，设置 Domain 时 不需要加前导点。浏览器不遵循该规范，则需要加前导点，例如：Domain=.mozilla.org
    • Path：路径
      • 指定了哪些主机下的哪些路径可以接受 Cookie(该 URL 路径必须存在于请求 URL 中)。
        • 例如，设置 Path=/docs，则以下地址都会匹配：
          • /docs
          • /docs/Web/
          • /docs/Web/HTTP

    • Expires/Max-Age：有效期

      • 会话期 cookie：不设置 Expires 或者 Max-Age 指令。会话期 cookie 会在客户端关闭时被移除，注意浏览器通常支持会话恢复功能

        1. Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

      • 持久化 cookie：不会在客户端关闭时失效，而是在特定的日期（Expires）或者经过一段特定的时间之后（Max-Age）才会失效。

        1. Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

    • SameSite：用来防止 CSRF 攻击和用户跟踪，用来限制第三方 Cookie,从而减少安全风险

      • 设置 Strict 或者 Lax,作用是确保不与跨域请求一起发送身份认证 cookie，因此，这种请求实际上不会向应用服务器进行身份认证
      • SameSite：Strict; // Strict 最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
      • SameSite：Lax; // 大多数情况不发送 Cookie，但是导航到目标网址的 GET 请求除外(只包括三种情况：链接、预加载请求、GET 表单)
      • SameSite：None; // Chrome 计划将 Lax 变为默认设置。这时，网站可以选择显式关闭 SameSite 属性，将其设为 None。不过，前提是必须同时设置 Secure 属性（Cookie 只能通过 HTTPS 协议发送），否则无效。
        • Set-Cookie: widget_session=abc123; SameSite=None; Secure
    • HttpOnly：
      • 设置 HttpOnly=true 的 cookie 不能被 js 获取到，无法用 document.cookie 打出 cookie 的内容。
    • Secure：
      • 设置 Secure=true，那么这个 cookie 只能用 https 协议发送给服务器，用 http 协议是不发送的。
  • Cookie 的特点
    • 大小限制：一般浏览器允许在同一个域下
    • 兼容性：
    • 稳定性：
    • cookie 会自动通过请求头发送給服务器
    • cookie 不仅前端可以设置，后端也可以设置
  • Cookie 前缀
    • 名称中包含 Secure- 或 Host- 前缀的 cookie，只可以应用在使用了安全连接（HTTPS）的域中，需要同时设置 secure 指令。
    • 另外，假如 cookie 以 Host- 为前缀，那么 path 属性的值必须为 “/“ （表示整个站点），且不能含有 domain 属性。 ``` // 当响应来自于一个安全域（HTTPS）的时候，二者都可以被客户端接受 Set-Cookie: Secure-ID=123; Secure; Domain=example.com Set-Cookie: __Host-ID=123; Secure; Path=/

// 缺少 Secure 指令，会被拒绝 Set-Cookie: __Secure-id=1

// 缺少 Path=/ 指令，会被拒绝 Set-Cookie: __Host-id=1; Secure

// 由于设置了 domain 属性，会被拒绝 Set-Cookie: __Host-id=1; Secure; Path=/; domain=example.com ```

  • javaScript 通过 Document.cookie 访问 Cookie
    • 通过 Document.cookie 属性可创建新的 Cookie，也可通过该属性访问非 HttpOnly 标记的 Cookie。
    • 通过 JavaScript 创建的 Cookie 不能包含 HttpOnly 标志。
    • JavaScript 可以通过跨站脚本攻击（XSS）的方式来窃取 Cookie。

本地存储的限制

  • 本地存储是受浏览器限制的，假如在谷歌下存储的数据在 IE 下拿不到
  • 受域的限制，不同域之间的存储是不互通的
  • 本地存储的信息在控制台可以查看