HTML5提供的数据持久化技术
一、application cache
1、manifest文件
2、application cache的浏览器事件
3、特点:(1)manifest文件有变化才会更新。(2)一次必须更新manifest中的所有文件。(3)下次才会生效。
二、localStorage、sessionStorage
设置数据语法:
localStorage.setItem("key", "value");
读取数据语法:
var lastname = localStorage.getItem("key");
删除数据语法:
localStorage.removeItem("key");
sessionStorage同上
三、 indexDB
创建
var db; var objectStore; var request = window.indexedDB.open(databaseName, version); request.onerror = function (event) {} request.onsuccess = function (event) { db = request.result//可以拿到数据库对象 } //如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded request.onupgradeneeded = function (event) { db = event.target.result; if (!db.objectStoreNames.contains('person')) {//判断是否存在 objectStore = db.createObjectStore('person', { keyPath: 'id' }); //自动生成主键
// db.createObjectStore( // 'person', // { autoIncrement: true } //); } //新建索引,参数索引名称、索引所在的属性、配置对象 objectStore.createIndex('email', 'email', { unique: true }); }
添加数据
function add() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); request.onsuccess = function (event) { console.log('数据写入成功'); }; request.onerror = function (event) { console.log('数据写入失败'); } } add();
读取数据
function add() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); request.onsuccess = function (event) { console.log('数据写入成功'); }; request.onerror = function (event) { console.log('数据写入失败'); } } add();
数据更新
function update() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); request.onsuccess = function (event) { console.log('数据更新成功'); }; request.onerror = function (event) { console.log('数据更新失败'); } } update();
数据删除
function remove() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .delete(1); request.onsuccess = function (event) { console.log('数据删除成功'); }; } remove();