HTML5存储

HTML

前端基础

Publish Date: 2020-04-03

Word Count: 998

本文主要介绍三种HTML5的浏览器端存储方式，以及每种方式具体的实现原理，操作规范以及它们各自的优缺点和适用场景，同时也会介绍一些非主流的存储方式。

一、关于浏览器存储

在H5之前，有cookie 和 userdata
1） cookies的三个特点：

携带在http请求头中
大小不超过4k，不超过20个
主domain会被污染

因此这些特性决定cookies的应用多是携带身份验证

2）Userdata也可以实现客户端存储，但是只有IE支持，不符合w3c标准并且平台支持不够广泛，最终存放在xml文件中

H5存储的目标在于：

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

二、H5的三种存储方式

本地存储（LoacalStorage && SessionStorage）

存储形式： key -> value
过期时间：LocalStorage永久存储，永不失效，除非手动删除；SessinStorage只有在当前会话中有效
大小：每个域名5M

API：getItem, setItem,removeItem,key,clear
存储的类型：数组，json数据，图片，脚本，样式文件

使用注意⚠️

判断浏览器是否支持
写数据的时候，需要异常处理，避免超出容量抛错
避免存放敏感信息
key的唯一性

使用限制🚫
1）存储更新策略，过期控制
浏览器虽然永不失效，但是我们可以自己去实现封装，实现数据过期的效果，具体的实现示🌰

function setStorage(key, value){
  var curTime = new Date().getTime()
  localStorage.setItem(key, JSON.stringify({data: value,time:curTime}))
}
function getStorage(key,exp){
  var data = localStorage.getItem(key)
  var dataObj = JSON.parse(data)
  if(new Date().getTime() - dataObj.time > exp){
    console.log(‘expires’)
  }
  else{
    console.log(‘data =’ + dataObj.data)
  }
}

2）子域名之间不能共享存储数据
postMessage做跨域共享
3）超出存储大小之后如何存储（LRU/FIFO）
及时删除旧数据
4）server端如何获取
在get、post请求的参数中的携带数据，发给server端

离线缓存（application cache）
H5离线缓存（offline application）：它可以让web应用在离线的情况下继续使用，通过manifest文件指明需要缓存的资源
检查是否在线： navigator.onLine

html中使用manifest <html manifest = "sample.appcache">
在服务器中添加mime-type text/cache-manifest

更新： 如果有修改资源文件，必须通过修改manifest文件来刷新被缓存的文件列表
优点： 1）完全离线 2）资源被缓存，加载更快 3）降低server负载
缺点： 1）含manifest怎样都会被缓存2）更新时需要两次刷新才能获取新资源 3）全局更新 4）链接的参数变化是敏感的，任何参数修改都会重新缓存
应用场景： 1）单地址页面 2）对实时性要求不高的业务 3）离线webapp

IndexDB 和 Web SQL

一种能在浏览器中持久地存储结构化数据的数据库，并且为web应用提供了丰富的查询能力。
浏览器支持： Chrome 11+， Opera不支持、Firefox 4+、IE 10+
存储结构：按照域名分配独立空间，一个独立域名下面可以创建多个数据库，每个数据库可以创建多个对象存储空间（表），一个对象存储空间可以存储多个对象数据

indexDB的实际操作：增删查改
借助事务、游标、查询索引
transaction.objectStore(tableName) // 获取Store对象