前端涉及到的数据存储

LocalStorage[h5 web storage]

• 不会过期

• 数据大小5MB

• 同源共享同一份localStorage

• 只能为string类型,注意需要JSON转换

SessionStorage[h5 web storage]

• 会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）

• 数据大小5MB

• 不跨窗口共享,就算同一url的多个tab各自独立

Cookie

• 手动设置过期时间，否则浏览器关闭失效

• 数据大小 4KB

• 参与每次http请求

• 有path和domain概念，

• 某些浏览器对单网站cookie数目有限制(不超过20个)

• cookie字段

  • name

  • value

  • domain　 可以访问此cookie的域，默认为该请求源的域origin

  • path　 　 可以访问此cookie的页面路径

  • expires / max-age 过期时间，如没设置则与会话时效相同（关闭浏览器窗口失效）

  • HttpOnly　 禁止js读取Document.cookie

  • Secure 只使用HTTPS传输

  • sameSite = 防止【XSRF】攻击

    • Strict 跨域时不允许带上任何cookie
    • Lax 只有三种情况可以带上cookie[a连接,get提交的表单,预加载link]

      现代浏览器会将没有声明 SameSite 值的 cookie 默认设置为Lax

    • None 不对发送进行限制，需配合secure使用用

      Set-Cookie: widget_session=xxxxx; SameSite=None; Secure

  Set-Cookie: <cookie-name>=<cookie-value>
  Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
  Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
  Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
  Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
  Set-Cookie: <cookie-name>=<cookie-value>; Secure
  Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
  
  Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
  Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
  Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure

  IndexedDB

• 除非被清理否则一直存在

• 数据大小无限制

• IndexedDB 是一个基于 JavaScript 的面向对象数据库，相比webStorage提供存储大量结构化数据的能力

manifest

manifest.json在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能, 比如离线可用和接收推送通知。