2019-05-28 HTML5本地存储

现在已经不流行用cookie存储数据了
cookie缺点：储存大小太小了，仅4kv左右。单个域名下有数量限制，50个左右。污染请求头，浪费流量。

API

localstorage和sessionStorage

临时储存

setItem(key,value);
getItem(key);
removeItem(key);//一条一条移出数据
clear()//直接把所有的内容全部清空
length//直接查看储存的个数

赋值：

对象.key=value；
对象[key]=value；

特性

localStorage一般没有储存时间限制。
sessionStorage这个存储会在网页会话结束后失效，刷新网页并不会使之失效，而是点击关闭网页，在重新打开会失效。

注意

存储容量超出限制，抛出QuotaExcueededError
类型的限制，只能储存字符串，注意类型转换。
相同URL不同标签页不能共享sessionStorage

indexDB

IndexDB是一个NoSQL类型的数据库（非关系型）

indexDB.open('数据库名'，'版本号')

创建数据库
函数：

onsuccess数据库创建或打开成功（如果指令成功，则执行回调函数）
onerror打开失败（如果指令失败执行的回调函数）
result可以看到相关数据
onupgradeneede版本升级时触发函数

indexDB.createObjectStore('表名')

创建表

indexDB.openCursor（range，direction）

创建游标
range指定游标范围
direction游标的方向

var request = indexDB.open();
var db = request.result;
var transaction = db.transaction('test3','readwrite');
var store = transaction.objectStore('test3');
var requestNode = store.openCusor(IDBKeyRange.only(200));
//参数一是范围

IDBRange对象

image.png

image.png

direction对象

prev逆序查询 prevunique逆序唯一查询
next顺序查询 nextunique顺序唯一查询

设置主键

1、设置自增主键

autoIncrement：true

2、取数据中字段作为主键

keyPath：字段名

IDBObjectStore.createIndex

indexName:索引名称
keyPath：索引字段，可以为空或者数组（type array）
optionParameters：索引配置参数

store.createIndex(表名称，数据key值，{unique:true});

唯一性
var index =store.index(表名)get（key值的名称）.onsuccess = function（）{
e.target.result 找到数据内容
}

模式

readwrite 读写模式
readonly 只能读不能写

add 添加
put（）继续添加数据
delete删除某一条数据，参数是key值
clear删除所有数据
get 里面放入key值就可以

getAll（） 获取全部的表中的json数据，这是result是以数组的形式展现