html5本地存储以及离线应用

最新推荐文章于 2021-08-10 22:12:42 发布

luckybing~

最新推荐文章于 2021-08-10 22:12:42 发布

阅读量380

点赞数

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/99978793

版权

本周在做项目的时候，用到了 sessionStorage 来存储来自上游页面用户输入的手机号码，所以总结了一下html5存储相关～

（一）html5之前的存储方式

（1）使用cookies存储：

其特点如下：

1）http请求头上会带着：如果数据多的话，会显得臃肿

2）大小4K：放置的数据不能超过4K

3）主domain污染：容易产生安全隐患

（2）userData：只有IE支持，存放到 XML文件里

（二）html5存储需要解决的问题

1. 解决4K 大小的问题

2. 解决请求头常带存储信息的问题（弊端：不安全、请求慢）

3. 跨浏览器（跨平台）

4. 解决关系型存储的问题

（三）html5的几种存储方式

（1）本地存储：localStorage 和 sessionStorage

（2）离线缓存：application cache

（3）关系型：IndexDB 和 web SQL

3.1 localStorage:

localStorage 的有效期是永久，除非手动删除否则将会一直存在于浏览器中。

存储大小约为5M，仅仅存在于客户端中，不参与服务端的通信。

用法：

1）设置值：

localStorage.setItem(key, value)
// 例子
localStorage.setItem('name', 'zhoufangbing')

2）取值：

localStorage.getItem(key)
// 例子
var name = localStorage.getItem('name')
console.log(name) // zhoufangbing

3) 删除某个值：

localStorage.removeItem(key)
// 例子
localStorage.removeItem('name')
var name = localStorage.getItem('name')
console.log(name) // null 为空

4）清空所有值：

localStorage.clear()

在 console 控制台里面设置也同样生效～

3.2 sessionStorage：

用法跟 localStorage 一样，就不多重复说啦～

区别：

sessionStorage 的仅在当前会话下有效，关闭浏览器、关闭页面或者重新打开一个新页面就会被清除～刷新当前页面不会被清除

在控制台里面测试一下～

本地存储可以存什么数据呢：

1. 数组 2. json数据 3. 图片 4. 脚本 5. 样式文件

关于复杂类型的存储：

var obj = {
  name: 'zhoufangbing',
  age: '22'
}
localStorage.setItem('person', obj)

直接存储会出问题，这是需要 JSON.parse和JSON.stringify 转化一下～

var obj = {
  name: 'zhoufangbing',
  age: '22'
}
localStorage.setItem('person', JSON.stringify(obj))
var person = JSON.parse(localStorage.getItem('person'))
console.log(person)

存的时候用JSON.stringify 把对象转化成字符串～取得时候再使用 JSON.parse 把字符串转化成对象～

注意的问题：

1. key的唯一性，否则会被覆盖

2. 本地存储超出限额～需要进行异常处理避免超出容量报错。超出则会报Uncaught QuotaExceededError错误（如下方）。

// 当存储数据大小超过限制时，会报以下错误：
// `obj` 指报错时存放数据的键值
Uncaught QuotaExceededError: Failed to set the 'obj' property on 'Storage': Setting the value of 'obj' exceeded the quota.

代码容错处理：

var obj = {
  name: 'zhoufangbing',
  age: 21
}
// 采用 try catch
try {
 localStorage.setItem('person', JSON.stringify(obj))
} catch (oException) {
  if(oException.name == 'QuotaExceededError') {
    console.log('超出本地存储限额！')
  }
}

本地存储取数据相比于从网络拉去数据在网差的条件下（高延迟弱网络）速度快些～

（四）index DB

index DB：一种能在浏览器中持久地存储结构化数据的数据库，并为web提供了丰富的查询能力。

indexDB按照域名分配独立空间，一个域名下可创建多个数据库，每个数据库可创建多个表，每个表可存储多个对象数据～

indexDB -----> 域名 ------> 数据库 --------> 表 ----------> 对象数据

IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

通过indexDB实现离线数据库：

1）新建数据库或者打开数据库

如果没有该名称的数据库就新建如果有就打开

var request = window.indexedDB.open(databaseName, version)

// 例子
var request = window.indexedDB.open(‘luckybing,1)

如果不写第二个参数，版本打开是当前版本，如果是新建，则默认为1

2）回调函数

// 打开失败时
request.onerror = function (event) {
  console.log('数据库打开报错');
};

// 打开成功时
request.onsuccess = function (event) {
  console.log('数据库打开成功');
}

最后附上阮一峰大大的关于index DB文章：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

离线存储：

（一）什么是离线、离线存储

应用在无网或者弱网的环境下，称为离线。

离线存储即可以让应用在离线的情况下继续使用，通过 manifest 文件指明需要缓存的资源。

Web App = html5 + css3 + js

（二）如何判断是否为离线状态