数据持久化及数据更新缓存
常用的8种缓存机制:HTTP缓存, locationStorage, Session Storage, Clear storage, Local Storage, indexDB, Web SQL, Cookies, CacheStorage, Application Cache.
LocalStroage :HTML5
不同浏览器中localStroage有长度限制且各不相同(IE8:5MB;firefox8:5.24MB;Opera:2MB;Chrome,Safari:2.6MB)
核心API:
+设置储存记录: localStorage.setItem()
+获取存储记录: localStorage.getItem()
+删除: localStroage.removeItem()
+删除全部: localStroage.clear()
SessionStorage:
+可以说sessinonstroage为临时储存器,与localStroge功能类似,但是在浏览器关闭之后数据会被清空.
+sessionstroage与localStroag的API 相同
cookie :
1.cookie指网站为了辨别用于身份或session跟踪而生成的储存
2.cookie储存小型数据,通常认为cookie的最大长度限制为4kb(4095b~4097b)
+设置(js可以使用document.cookie属性来创建,读取,及删除cookie)
+document.cookie = 'key=value'
//读取或获取是通过点语法来获取
+console.log(docunment.cookie.username);
为cookie添加一个结束时间(可以用GMT或是UTC)
+docunment.cookie="key=value; key=value; key=value; expires=Tues, 31 Oct 2017 12:00:00 GMT"
+删除 由于可以设置过期时间,如果要删除的话,可以将过期时间设置成以前的时间
Application Cache
是一种通过mainfest配置文件在本地有选择性的储存js,css,图片等静态资源等待文件等待文件缓存机制
//mainfest 是HTML下的属性,形式为
格式为
CACHE MANIFEST
#version 1.9
CACHE:
index.html
code.js
本地缓存
NETWORK
style.css
网上缓存
Application Cache 优势:
+离线浏览
+快速加载
+服务器负载小
尽管Application Cache的实现方便, 但是Application Cache 已经开始被标准弃用, 渐渐将会由ServiceWorkers来代替,所以现在不建议使用Application Cache来实现离线应用
WebSQL, indexDB
WebSQL是浏览器用于储存较大量数据的缓存机制;需要使用数据库知识:
创建数据库 CREATE DATABASE 数据库名
删除数据库 DROP DATABASE 数据库名
创建新表 CREATE TABLE 表名(条件)
删除新表 DROP TABLE 表名
几个基本的sql语句
+选择 select * from 要操作的表格名 where 范围
+插入 insert into 要操作的表格名
+删除 delete from 要操作的表格名 where 范围
+更新 update 要操作的表格名set field1=value1 where 范围
WebSQL不是HTML5规范
IndexDB: 也是一个可在客户端存储大量结构化数据数据库
WebSQL, indexDB实际应用场景不是很多, 而且将大量数据存储保存在本地也会造成数据泄露, 了解即可, 无需在实际项目使用
WebSQL三个核心API: openDatabase(); 创建transaction();执行 executeSql()删除
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});