html5的本地存储,Html5本地存储

使用场景，用户状态管理

1.存储大小限制 仅4k左右，且每次请求都会发送回服务器

2.单域名数量限制 50个左右

3.污染请求头，浪费流量

二、localStorage 和 sessionStorage

用法

1.使用setItem方法设置存储内容

2.使用getItem方法获取存储内容

3.使用removeItem方法删除存储内容

4.使用clear方法清除所有内容

5.使用length属性获取存储内容的个数

6.使用key方法获取存储字段

localStorage持久化，不会随着浏览器的关闭而失效，存储在硬盘中， 2.5MB 到 10MB 之间(各家浏览器不同)。可以设置数据的存储时间，过期数据清理，自行维护存储空间。不提供搜索功能，不能建立自定义的索引。

sessionStorage会随着网页会话结束而失效，存储在内存中。存储流量不一，部分浏览器不设限。

注意点

1.注意存储容量超出配额 超出后会抛出异常

2.存储类型的限制，仅能存储字符串 隐式的类型转换

3.sessionStorage失效机制

-刷新页面不会失效

-同一个域名下的不同标签不共享

三、indexedDB数据库

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库(不支持 SQL 查询语句)，更接近 NoSQL 数据库。

特点

(1)键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

(2)异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

(3)支持事务。 IndexedDB 支持事务(transaction)，这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

(4)同源限制。 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

(5)储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

(6)支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

对象接口关系

关系图.png

简单事例

以数据库dataObj为例，创建一个person仓库，索引为name

1、打开或创建一个数据库

// 兼容性写法

window.indexedDB =

window.indexedDB ||

window.mozIndexedDB ||

window.webkitIndexedDB ||

window.msIndexedDB;

window.IDBTransaction =

window.IDBTransaction ||

window.webkitIDBTransaction ||

window.msIDBTransaction;

window.IDBKeyRange =

window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

// 兼容性写法

//打开或者新建数据库，如果数据库存在的时候就是打开，不存在的时候就是新建

//传入数据库的名称和版本号，版本号为整数如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1

//这是一个异步操作，但是会立刻返回一个 IDBOpenDBRequest 对象。

var request = window.indexedDB.open('dateObj', 1);

//删除数据库,调用deleteDatabase()方法以后，当前数据库的其他已经打开的连接都会接收到versionchange事件。

// window.indexedDB.deleteDatabase(databaseName);

// 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。

// 不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。

var db;//数据库IDBDatabase对象

request.onupgradeneeded = function (event) {

console.log('新建数据库')

db = event.target.result;

var objectStore;

if (!db.objectStoreNames.contains('person')) { //检查数据库是否包含该对象仓库

// 只能在onupgradeneeded回调函数中创建存储空间，而不能在数据库打开后的success回调函数中创建。

// 删除仓库对象(删除表格) db.deleteObjectStore(objectStoreName);

// db.close()：关闭数据库连接，实际会等所有事务完成后再关闭。

objectStore = db.createObjectStore('person', {

keyPath: 'id', //keyPath表示主键，(由于主键的值不能重复，所以上例存入之前，必须保证数据的email属性值都是不一样的)，默认值为null

autoIncrement: true

//autoIncrement属性表示，是否使用自动递增的整数作为主键(第一个数据记录为1，第二个数据记录为2，以此类推)，默认为false。

//一般来说，keyPath和autoIncrement属性只要使用一个就够了，如果两个同时使用，表示主键为递增的整数，且对象不得缺少keyPath指定的属性。

});

// IDBObject.createIndex()的三个参数分别为索引名称、指定根据存储数据的哪一个属性来构建索引、配置对象(说明该属性是否包含重复的值)。

//新建索引

objectStore.createIndex('name', 'name', {

unique: false//true的话表示不允许有重复的值

});

// 删除索引：objectStore.deleteIndex()

// 获取所有索引对象：objectStore.index()

}

// 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded

request.onupgradeneeded = function (event) {

db = event.target.result;

}

//失败事件

request.onerror = function (event) {

console.log('数据库打开报错');

};

//成功事件

request.onsuccess = function (event) {

db = event.target.result;

//无论是创建还是打开数据库，最后都会进入onsuccess

console.log('数据库打开成功');

};

}

2、向person对象仓库写入数据记录

function add(db, name) {

// 事务函数transaction的第一个参数为需要关联的存储空间，第二个可选参数为事务模式。

// readonly(只读)和readwrite(读写)。添加数据使用readwrite，读取数据使用readonly。

// 第二个参数是可选的，省略时默认为readonly模式。

console.log('db', db.transaction(['person'], 'readwrite'))

var req = db.transaction(['person'], 'readwrite').objectStore('person').add({

name: name,

age: 29,

email: 'zhangsan@example.com'

});

req.onsuccess = function (event) {

console.log('db', db)

console.log('数据写入成功');

};

req.onerror = function (event) {

console.log('event', event)

console.log('数据写入失败');

}

}

3、在person对象仓库读取数据记录

function read(db) {//读取一条

var transaction = db.transaction(['person']);

var objectStore = transaction.objectStore('person');

var request = objectStore.get(1);//用主id去获取到对应的值

request.onerror = function (event) {

console.log('事务失败');

};

request.onsuccess = function (event) {

if (request.result) {

console.log('Name: ' + request.result.name);

console.log('Age: ' + request.result.age);

console.log('Email: ' + request.result.email);

} else {

console.log('未获得数据记录');

}

};

}

//使用索引获取到具体的值

function readItem(db, name) {

var store = db.transaction(['person'], 'readonly')

.objectStore('person')

var index = store.index('name')

// var request=index.count(name)//符合索引的值的数量

// var request=index.get(name)//只能获取到第一个匹配到的值

// var request=index.getAll(name)//获取到所有匹配到的值

// var request=index.getKey(name)//获取到第一个匹配到的值的主键的值

// var request=index.getAllKeys(name)//获取到所有匹配到的值的主键的值

var request = index.openCursor(name)

request.onsuccess = function (e) {

var result = e.target.result

console.log('result', result)

};

}

function readAll(db) {//读取全部

var objectStore = db.transaction('person').objectStore('person');

// objectStore.openCursor()用于获取一个指针对象。

// objectStore.openKeyCursor()用于获取一个主键指针对象。

objectStore.openCursor().onsuccess = function (event) {

var cursor = event.target.result;

if (cursor) {

console.log('Id: ' + cursor.key);

console.log('Name: ' + cursor.value.name);

console.log('Age: ' + cursor.value.age);

console.log('Email: ' + cursor.value.email);

cursor.continue();

} else {

console.log('没有更多数据了！');

}

};

}

4、在person对象仓库更新数据记录

function update(db) {

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('数据更新失败');

}

}

5、在person对象仓库删除数据记录

function remove(db) {

var request = db.transaction(['person'], 'readwrite')

.objectStore('person')

.delete(1);

request.onsuccess = function (event) {

console.log('数据删除成功');

};

}

四、参考文章