您的位置: 首页  >  文章  >  html5存储

html5存储

分类: 文章 • 2022-10-09 22:56:38

html5之前：

1.cookies诞生

  • http请求头里会带着
  • 大小4K
  • 主Domain污染（子域名的cookies会带上主域名里设置的cookies）

百度首页cookies：（cookies在浏览器存储形态）

html5存储

2.UserData 

  • 只有IE支持
  • 最终存储放在一个XML文件里

html5存储

1.诞生的目的

  • 解决4k的大小问题
  • 解决请求头常带存储信息的问题
  • 解决关系型存储的问题
  • 跨浏览器

2.html5的几种存储

  • 本地存储(localstorage && sessionstorage)
  • 离线缓存(application cache)
  • IndexedDB和Web SQL

3.本地存储(localstorage && sessionstorage)

  • 存储形式：key-value
  • 过期时间：
    • localstorage：永久存储，永不失效，除非手动删除；
    • sessionstorage：会话结束（重新打开一个页面）或浏览器关闭时删除
  • 大小：官方文档给出的是每个域名5M
  • 使用方法（API）
    • getItem
    • setItem
    • removeItem
    • key（指定索引的key值）
    • clear（全部删除）
  • 可以存什么东西？（只要能序列化成字符串就都可以存储）
    • 数组/json数据/图片/脚本/样式文件
    • 存图片

  • html5存储

    • 取图片

  • html5存储

  • 使用注意事项
    • 使用前要判断浏览器是否支持
    • 写数据时，需要异常处理，避免超出容量抛错
    • 避免存入敏感信息
    • key的唯一性
  • 使用限制
    • 存储更新策略，过期控制

    • html5存储

    • 子域名之间不能共享存储数据
    • 超出存储大小之后如何存储（LRU，FIFO）
    • server端如何取到（通过在请求后面添加参数传给服务端）
  • 使用场景
    1. 利用本地数据，减少网络传输
    2. 弱网络环境下，高延迟，低宽带，尽量把数据本地化

4.IndexedDB（先放一放）

5.html5的离线缓存

  • 什么是离线缓存？
    • 可以让web应用在离线情况下继续使用，通过manifest文件指明需要缓存的资源
  • 检测是否在线
    • navigator.onLine
  • 原理

html5存储

  • 缺陷
    • 如果文件更新了，第一次访问的还是旧文件，只有第二次才能访问到更新后的文件
    • 如果只有一个文件更新，也会全部重新拉取
    • 对链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存
  • 优势
    • 完全离线
    • 资源被缓存，加载更快
    • 降低server负载
  • 使用
    • 创建manifest文件

    • html5存储

    • 在html页面中引用manifest文件
      • <html manifest="**.appcache">
    • 在服务器添加mime-type text/cache-manifest
  • 试用场景
    • 单地址的页面
    • 对实时性要求不高的业务
    • 离线webapp

相关推荐