HTML5 5大存储方式总结

澳门新葡亰网址 3

总体情况

h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。

主要应用:购物车、客户登录

对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。

前言

最近想为女朋友写一个记账的app,因为要进行数据分类统计,得出每个月,每年的开销,以及各种类型支付所占的比例,且需要保证App能够离线使用又可以换机使用,就涉及到了本地数据的存储和数据与服务器的数据同步。

本文介绍本地数据存储的选型。简单总结一些查询到的关于本地数据存储的技术。

目标

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

控制台展示前端存储

1.本地存储localstorage

存储方式:

以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。

大小:

每个域名5M

支持情况:

澳门新葡亰网址 1

注意:IE9 localStorage不支持本地文件,需要将项目署到服务器,才可以支持!

检测方法:

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

常用的API:

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

澳门新葡亰网址 2

存储的内容:

数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)

Chrome:

![Uploading storage-clipboard_148551.png . . .]

2.本地存储sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage
在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而
localStorage 则会一直保存。

前端离线存储目前支持 Cookie、localStorage、sessionStorage、IndexedDB、Web SQL Database以及FileSystem.

3.离线缓存(application cache)

本地缓存应用所需的文件

使用方法:

①配置manifest文件

页面上:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest 文件:

manifest
文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分:

①CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存

②NETWORK – 在此标题下列出的文件需要与服务器的连接,且不会被缓存

③FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404
页面)

完整demo:

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

服务器上:manifest文件需要配置正确的MIME-type,即
“text/cache-manifest”。

如Tomcat:

<mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

常用API:

核心是applicationCache对象,有个status属性,表示应用缓存的当前状态:

0(UNCACHED) :  无缓存, 即没有与页面相关的应用缓存

1(IDLE) : 闲置,即应用缓存未得到更新

2 (CHECKING) : 检查中,即正在下载描述文件并检查更新

3 (DOWNLOADING) : 下载中,即应用缓存正在下载描述文件中指定的资源

4 (UPDATEREADY) : 更新完成,所有资源都已下载完毕

5 (IDLE) : 
废弃,即应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

相关的事件:

表示应用缓存状态的改变:

checking : 在浏览器为应用缓存查找更新时触发

error : 在检查更新或下载资源期间发送错误时触发

noupdate : 在检查描述文件发现文件无变化时触发

downloading : 在开始下载应用缓存资源时触发

progress:在文件下载应用缓存的过程中持续不断地下载地触发

updateready : 在页面新的应用缓存下载完毕触发

cached : 在应用缓存完整可用时触发

Application Cache的三个优势:

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

注意事项:

1. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点
5MB)

2.
如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存

  1. 引用manifest的html必须与manifest文件同源,在同一个域下

4. 浏览器会自动缓存引用manifest文件的HTML文件,这就导致如果改了HTML内容,也需要更新版本才能做到更新。

5.
manifest文件中CACHE则与NETWORK,FALLBACK的位置顺序没有关系,如果是隐式声明需要在最前面

  1. FALLBACK中的资源必须和manifest文件同源

7.
更新完版本后,必须刷新一次才会启动新版本(会出现重刷一次页面的情况),需要添加监听版本事件。

8.
站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问

  1. 当manifest文件发生改变时,资源请求本身也会触发更新

离线缓存与传统浏览器缓存区别:

  1. 离线缓存是针对整个应用,浏览器缓存是单个文件

  2. 离线缓存断网了还是可以打开页面,浏览器缓存不行

  3. 离线缓存可以主动通知浏览器更新资源

本地存储概览

4.Web SQL

关系数据库,通过SQL语句访问

Web SQL 数据库 API 并不是 HTML5
规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL
操作客户端数据库的 APIs。

支持情况:

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法:

①openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

②transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。

③executeSql:这个方法用于执行实际的 SQL 查询。

打开数据库:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为:数据库名称、版本号、描述文本、数据库大小、创建回调

执行查询操作:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});

插入数据:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

读取数据:

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).name );
      }

   }, null);
});

由这些操作可以看出,基本上都是用SQL语句进行数据库的相关操作,如果你会MySQL的话,这个应该比较容易用。

好处(一切为了提升用户体验 :D):
  • 方便网页的加载,避免取回数据前页面一片空白,如果不需要最新数据也可以减少向服务端请求的次数,从而减少用户等待从服务器获取数据的时间;
  • 网络状态不佳时仍可以显示离线数据。

5.IndexedDB

索引数据库 (IndexedDB) API(作为 HTML5
的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web
应用程序很有用。同时它还有助于本地缓存数据,使传统在线 Web
应用程序(比如移动 Web 应用程序)能够更快地运行和响应。

异步API:

在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式,比如打开数据库的操作

澳门新葡亰网址 3

这样,我们打开数据库的时候,实质上返回了一个DB对象,而这个对象就在result中。由上图可以看出,除了result之外。还有几个重要的属性就是onerror、onsuccess、onupgradeneeded(我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用)。这就类似于我们的ajax请求那样。我们发起了这个请求之后并不能确定它什么时候才请求成功,所以需要在回调中处理一些逻辑。

关闭与删除:

function closeDB(db){
     db.close();
}
function deleteDB(name){
     indexedDB.deleteDatabase(name);
}

数据存储:

indexedDB中没有表的概念,而是objectStore,一个数据库中可以包含多个objectStore,objectStore是一个灵活的数据结构,可以存放多种类型数据。也就是说一个objectStore相当于一张表,里面存储的每条数据和一个键相关联。

我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键值(keyGenerator),也可以不指定。选择键的类型不同,objectStore可以存储的数据结构也有差异。

这个就有点复杂了。看这里的教程:

1.

2.

详细API地址:

1)本地数据存储:一般存储的都是数据
  • Cookie:浏览器均支持,容量为4KB,用起来超级麻烦,而且限制极大;不适合
  • IE用户数据(UserData):仅IE支持
  • Web存储机制(Web Storage):H5,容量为5M。可以做key value
    的存储,对于需要有些关系处理的数据,需要自己做逻辑处理,比较麻烦

    • localStorage
    • sessionStorage
      :其实算不上离线存储,因为网页关闭了,存储就会丢弃。
    • globalStorage(Firefox独有,Firefox13起就不再支持)
  • 数据库存储:
    • IndexDB:IndexedDB其实就是前段的nosql数据库。
    • Web SQL:关系数据库,需要注意的是,HTML5会放弃Web SQL
2)离线存储(应用缓存):一般存储的是网页
  • Cache Storage:定义在 Service Worker 的规范中,配合 Service Worker
    进行离线缓存
  • Application Cache:在定稿的 HTML 5.1 中被拿到了

对主要前端存储方式的详解和比较

1. 小容量的 cookie

1.1 说明

HTTP Cookie,最初用于在客户端存储会话信息。该标准要求服务器对任意 HTTP
请求发送 Set-Cookie HTTP
头作为响应的一部分,其中包含会话信息。浏览器会存储这样的会话信息,并在这之后,通过为每个请求添加
Cookie HTTP 头将信息发送回服务器。

【举例如下】:

storage-cookie-header.png

1.2 使用

在 JavaScript 中可以通过 document.cookie 设置字段和进行访问。

// 设置 cookie 字段
document.cookie = 'name=Lucy';

// 更好的设置方式:
document.cookie = encodeURIComponent('age') + '=' + encodeURIComponent(25);

// 访问 cookie
document.cookie

// 删除 cookie(设置存储有效时长为过去时间)
var date = new Date();
date.setDate(date.getDate() + '设置时长');
document.cookie = 'name=Lucy;expires=' + date.toUTCString();

storage-cookie-js-use.png

1.3 访问限制及存储时长

cookie 可以设置访问域,在设置 cookie 的时候,设定了 cookie
的访问域名为一个顶级域名,则可以达到几个子域名共享 cookie
的效果,如腾讯网
www.qq.com 与微信网页版
wx.qq.com 共享了
pac_uid,以及不同页面的购物车共享。
如果设定了 cookie 的超时时间,则 cookie 将在到期的时候失效。
如果没有设定超时时间,则是 session 级别的(注意上图 Expires/Max-Age
一栏),在退出浏览器时,该 cookie 将消失。
cookie 的 session 不同于 sessionStorage 的 session,cookie 的 session
是指在未关闭浏览器的情况下,所有的 tab
级别的页面或新开,或刷新,均属于一个 session。

1.4 cookie 的优缺点

优点:

可控制过期时间,使其不会长期有效
可扩展、可用性比较好,可跨域共享
可加密减少cookie被破解的可能性
兼容性好
缺点:

数量和长度有限制
在请求头上带着数据安全性差

webstorage.png

1.5 应用场景

一般非到不得已,不要在 cookie
里面存东西,更不要存储重要和敏感的数据。如果要存储的话,建议存储一些同步访问页面的时候必须要被带到服务端的信息。

客户端登录,用于保存用户信息。如“下次自动登录”的选项,勾选之后下次就不需要重复验证。通过
cookie 可以保存用户的 id。
创建购物车。可以实现不同页面之间的数据同步(同一个域名下是可以共享cookie的),同时在提交订单的时候又会把这些cookie传到后台。
跟踪用户行为。例如百度联盟会通过cookie记录用户的偏好信息,从而推荐个性化推广信息,如页面上的小广告。这是可以禁用的,也是cookie的缺点之一。

2. Web Storage:仅存储于客户端

定义了两种用于存储数据的对象:sessionStorage 和
localStorage,后两者是Storage的实例。

注意:Storage
类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串。

webstorage.png

2.1 目的及两个主要目标
  • 克服由 cookie
    带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。
  • (目标)提供一种在 cookie 之外存储会话数据的途径;
  • (目标)提供一种存储大量可以跨会话存在的数据的机制。
2.2 访问方式

这两个对象在浏览器中都是以 windows 对象属性的形式存在,在 JavaScript
中可以直接通过 sessionStorage 和 localStorage 访问。

2.3 Storage 的实例方法
  • clear:删除所有值,Firefox中没有实现
  • getItem(name):根据指定的名字 name 获取对应的值
  • key(index):获得 index 处的值的名字
  • removeItem(name):删除由 name 指定的名值对儿
  • setItem(name, value):为指定的 name 设置一个对应的值
2.4 sessionStorage 和 localStorage 介绍

短暂的 sessionStorage

1) 使用:

storage-sessionStorage.png

澳门新葡亰网址,2) 访问限制:

同源策略:不同于cookie,sessionStorage访问限制更高,只有当前设定sessionStorage的域下才能访问;
单标签页:两个tab(相同域)之间不能互通;
在新开的tab下或者关闭本tab之后再打开,也不能访问之前写下的sessionStorage;
刷新本tab可以访问。

3) 特点及应用场景:

主要用于仅针对会话的小段数据的存储。
建议存储一些当前页面刷新需要存储,且不需要在tab关闭时候留下的信息。
可以用来检测用户是否是刷新进入的页面,如音乐播放器恢复播放进度条的功能。
非常适合单页应用程序,可以方便在各业务模块进行传值。
持久的 localStorage(隐身窗口例外)

  1. 使用: 同 sessionStorage

  2. 访问限制:

同源策略:同 sessionStorage,要访问同一个
localStorage,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上;
localStorage 设定后,刷新或新开 tab
是可以访问到的,关闭浏览器重新打开原先tab也可访问。

  1. 特点及应用场景:

持久保存客户端数据,数据保留到通过JavaScript删除或者用户清除浏览器缓存。
如果有一些数据,服务器难以承载其压力,但又要与用户的信息绑定,可以使用
localStorage
存储一些状态,这样既能缓解服务器压力,也可以存储用户的数据。
数据比较大的临时保存方案。如在线编辑文章时的自动保存。
多页面访问共同数据。sessionStorage只适用于同一个标签页,localStorage相比而言可以在多个标签页中共享数据。

localStorage 与 sessionStorage 的区别总结

H5的两种存储技术的最大区别就是生命周期
localStorage是本地存储,存储期限不限;
sessionStorage是会话存储,页面关闭数据就会丢失。
sessionStorage 有单标签页限制,localStorage 则没有。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图