05、HTML5存储

HTML5存储

//一个比cookie更好的本地存储方式。

 

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

 

localStorage 和 sessionStorage 

客户端存储数据的两个对象为：

  • localStorage
  • - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
  • 存储容量2-5M
  • sessionStorage
  • - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
  • 存储容量不一，部分浏览器不设限制

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

 

判断浏览器是否支持HTML5存储

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

 

localStorage 对象

//localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

// 存储key为jj，value为"这个是jj属性的值"的数据
localStorage.jj = "这个是jj属性的值";
// 查找jj属性对应的value
alert(localStorage.jj) ;

 

localStorage的常用方法（换个session前缀也可用于sessionStorage）

  • 保存数据 (推荐)：localStorage.setItem(key,value);
  • 保存数据：localStorage.key = value;
  • 保存数据：localStorage[key] = value;
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

Tip： 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

 

sessionStorage 对象

//sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

sessionStorage的属性方法同localStorage一样。实例：

if (sessionStorage.jj)    //判断sessionStorage的jj是否存在
{
    sessionStorage.jj=Number(sessionStorage.jj)+1;
    //若存在就转换为数字，令其加一
}
else
{
    sessionStorage.jj=1;
    //若不存在就定义一个
}
alert("执行了" + sessionStorage.jj + "次");

 

浏览器数据库 IndexedDB

阮一峰教程：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

  • Cookie：存储大小不超过4KB。且每次请求都会发送回服务器；
  • LocalStorage： 存储大小在 2.5MB 到 10MB 之间（各家浏览器不同）。且不提供搜索功能，不能建立自定义的索引。
  • SessionStorage：存储大小不一（部分浏览器不设限制）。但在关闭窗口或标签页之后将会删除这些数据。
  • IndexedDB：存储大小不少于 250MB，甚至没有上限。

 

打开数据库

var request = window.indexedDB.open(databaseName, version);

 

//version版本号，可选参数 。

//若没有该数据库就创建，有就打开

打开数据库成功（事件）

request.onsuccess = function(){
console.log(数据库打开/创建成功);
}

 

打开数据库失败（事件）

//版本号只能升级不能降级，否则数据库会打开失败

request.onerror = function(){
console.log("数据库打开/创建失败");
}

 

版本号已升级（事件）

request.onupgradeneeded = function(){
console.log("版本号已升级");
}

 

创建表

//需要版本号升级后，才能创建表

//将版本号升级为2
var request = window.indexedDB.open('shujvming',2);


//版本号升级成功后，才能创建表
request.onupgradeneeded = function(){
　　var table = request.result;
　　//建表时要设置主键，如设置自增主键
　　table.createObjectStore('table1',{autoIncrement:true});
}

 

设置主键（建表时操作）

//设置自增主键
{autoIncrement: true}
//设置某字段为主键
{keyPath:'字段名'}

 

 

表数据的增删改查

//增加数据：IDBObjectStore.add

//获取数据：IDBObjectStore.get
//获取全部数据：IDBObjectStore.getAll

//修改数据：IDBObjectStore.put

//删除数据：IDBObjectStore.del
//删除全部数据：IDBObjectStore.clear

增加数据

function add() {
    //选择需要操作的某个数据库
    var db = request.result;

    //写入数据必须新建事务。
    var shiwu = db.transaction(['table1'], 'readwrite'); //指定表格名称和操作模式（"只读"或"读写"）。

    //选择需要操作的某个表
    var tb = shiwu.objectStore('table1');

　　　 //执行插入内容
　　　 var state = tb.add(tbshujv);

　　　 //插入成功后提示
　　  state.onsuccess = function(){
　　  　　console.log("插入成功了");

　　　　　console.log(state.result); //执行成功后返回该条数据的key值

　　　}


setTimeout(function() {
    add();
}, 300)

 查找数据

//通过key值，查找该条数据

setTimeout(function() {
　　var db = request.result;
　　var shiwu = db.transaction(['table1'], 'readwrite');
　　var tb = shiwu.objectStore('table1');
　　/ 获取数据
　　var tbNode = tb.get(1);
　　tbNode.onsuccess = function() {
　　　　console.log(tbNode.result);
　　}
}, 300)

//获取所有数据，result是以数据形式表现

setTimeout(function() {
　　var db = request.result;
　　var shiwu = db.transaction(['table1'], 'readwrite');
　　var tb = shiwu.objectStore('table1');
　　// 获取所有数据
　　var tbNode = tb.getAll();
　　tbNode.onsuccess = function() {
　　　　console.log(tbNode.result);
　　}
}, 300)

修改 / 增加数据 

setTimeout(function() {
　　var db = request.result;
　　var shiwu = db.transaction(['table1'], 'readwrite');
　　var tb = shiwu.objectStore('table1');
　　// 修改 / 增加数据
　　var tbNode = tb.put({
           "id":102,
           "name":"zhanag",
            "bb":"bb"
      });
}, 300)

 

删除数据

//通过key值，删除该条数据

setTimeout(function() {
　　var db = request.result;
　　var shiwu = db.transaction(['table1'], 'readwrite');
　　var tb = shiwu.objectStore('table1');
　　// 删除数据
　　tb.del(1); //删除key值为1的那条数据
}, 300)

 

//删除所有数据

setTimeout(function() {
　　var db = request.result;
　　var shiwu = db.transaction(['table1'], 'readwrite');
　　var tb = shiwu.objectStore('table1');
　　// 删除所有数据
　　tb.clear(); 
}, 300)

 

 

indexedDB索引

IDBObjectStore.createIndex
indexName：索引名称（表名）
keyPath：索引字段，可以为空或数组。（表字段）
optionParameters：索引配置参数（字段是否重复）

 

 //刚建完表后  就可以创建索引

request.onupgradeneeded = function() {
    var table = request.result;//选择数据库
    var store = table.createObjectStore('table1', {autoIncrement: true});
    //设置索引
    store.createIndex('table1','name',{unique:false}); //若unique为true，字段就不能重复，否则数据库就不写入内容
}

 

//获取索引值  所对应的那条数据

setTimeout(function(){
    var db = request.result;
    var shiwu = db.transaction(['table1'], 'readwrite');
    var tb = shiwu.objectStore('table1');

    //获取索引值所对应的那条数据
    var index = tb.index('table1'); //选择表
    index.get('zhang').onsuccess = function(event) {
        console.log(event.target.result);
    }
},300)

 

 

游标

//能更好地获取表格数据（不通过索引值方式）

setTimeout(function(){
    var db = request.result;
    var shiwu = db.transaction(['table1'], 'readwrite');
    var tb = shiwu.objectStore('table1');

    //通过游标获取数据
    var you = tb.openCursor(IDBKeyRange.only(1)); //仅获取key值为1的索引数据
    //获取成功后打印出来
    you.onsuccess = function(){
        console.log(you.result.value);
    };
},300)

 

遍历

//输出key小于等于2的数据（ upperBound(x) ）

setTimeout(function() {
    var db = request.result;
    var shiwu = db.transaction(['table1'], 'readwrite');
    var tb = shiwu.objectStore('table1');

    //通过游标获取数据
    var you = tb.openCursor(IDBKeyRange.upperBound(2)); //获取key小于等于2的数据
    //可能返回多个IDBRequest对象。（IDBRequest -> result -> value，value对象才是数据）

    //获取成功后打印出来
    you.onsuccess = function() {
        if (you.result) { //IDBRequest -> result 里面才有循环方法
            console.log(you.result.value);
            you.result.continue(); //因为可能有多组数据，所以需要循环输出
        }
    };
}, 300)

 

//具体实现方法同上

查询顺序（direction）

//在获取数据时定义，默认正序next

var you = tb.openCursor(IDBKeyRange.upperBound(2),'next');

 

//下面是倒序prev

var you = tb.openCursor(IDBKeyRange.upperBound(2),'prev');

 

//另外还有：

顺序唯一查询：nextunique

倒序唯一查询：prevunique

 

索引跟游标结合 

//普通游标用的是key值，加了索引后就可以用其他值了

//建完表创建索引
store.createIndex('table1','age',{unique:false});

setTimeout(function() {
    var db = request.result;
    var shiwu = db.transaction(['table1'], 'readwrite');
    var tb = shiwu.objectStore('table1');
    
    //选择表
    var index = tb.index('table1');    
/******* 上面是索引方法，下面是游标方法 *****************************************************/
    //通过游标获取数据（普通游标获取的是key值，现在通过索引更改成了age）
    var you = tb.openCursor(IDBKeyRange.upperBound(18)); //age小于等于18的数据
    //获取成功后打印出来
    you.onsuccess = function() {
        if (you.result) { //IDBRequest -> result 里面才有循环方法
            console.log(you.result.value);
            you.result.continue(); //因为可能有多组数据，所以需要循环输出
        }
    };
}, 300)

 

更新数据

you.onsuccess = function() {
    if (you.result.value.name == 'zhangsan') { //获取name='zhangsan'的那条数据
        you.result.update({    //执行更新
            "id": 666,
            "name": "lisi",
            "age": 80,
            "address": "shanghai"
        })
    }
}

 

删除数据

you.onsuccess = function() {
    if (you.result.value.name == 'zhang') { //获取name='zhang'的那条数据
        var del = you.result.delete();
        del.onsuccess = function() {
            console.log("删除成功");
        }
    }
}

 

posted @ 2020-04-09 15:20  JaydenQiu  阅读(173)  评论(0)    收藏  举报