首页 > 程序开发 > web前端 > HTML/CSS >

Html5中数据存储的方式

2017-08-09

Html5中数据存储的方式。1 Storage;2 webSQL 数据库操作;3 Indexeddb 数据库操作。在HTML5本地存储中,Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Web Storage(Local Storage和Session Storage)与IndexedDB。

1.Storage

2.webSQL 数据库操作

3.Indexeddb 数据库操作

在HTML5本地存储中,Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Web Storage(Local Storage和Session Storage)与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储力不从心,IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API。

Storage

setItem(key,value);
getItem(key);
1.sessionStorage:只在不关闭浏览器的情况下 数据有效,只要关闭掉浏览器就会 清除保存的数据
2.localStorage:只要不清楚缓存  保存到浏览器的数据 一直存在

indexedDB

indexedDB是一个nosql ,都是以对象的方式区存储

indexedDB的基本操作
1. 打开数据库并且开始一个事务。(事务 一个平台 演员的舞台 是一个可以提供表演的地方)
2. 创建一个 object store。
3. 构建一个请求来执行一些数据库操作,像增加或提取数据等。
4. 通过监听正确类型的 DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作(可以在 request 对象中找到

使用流程:(1.打开数据库2.建表3.增删改查)
1. 判断浏览器 是不是 支持 indexedDB
indexedDB?alert(“支持indexedDB”):alert(“不支持indexedDB”);
2.打开/创建数据库
indexedDB.open(“数据库的名字”); -> IDBOpenDBRequest
IDBOpenDBRequest:
监听事件:
onerror:创建或者 打开数据库 失败的时候 调用
onsuccess:创建或者 打开数据库成功 的时候 调用
Onupgradeneeded:只在数据库的版本号 被更新的时候调用
3.创建类似于BMOB里面 的某个表(也可以想象为是一个数据模型)
通过ObjectStore进行操作(增删改查建表)

1.建表(创建类)数据库的对象.createObjectStore(“表名字”,设置唯一字段(设置这个类里面 可以找到某一个对象的属性));
2.创建字段(给创建的类 添加属性)ObjectStore的对象.createIndex(“属性名”,”key“);
4.增删改查的操作
objectStore.add() 增
objectStore.delete()删
objectStore.put()改
objectStore.get()查

代码示例:
1. 打开数据库

function openDB() {
    var request = indexedDB.open("noteDB",1);
    request.onerror = function (errror) {
        console.log(errror);
    };
    request.onsuccess = function () {
        console.log("打开数据库成功");
    };
    //只在数据库版本号 两次不一致的情况下 调用
    request.onupgradeneeded = function () {
        console.log("更新数据库成功",this);
    };
} 

2.建表
从没有数据库到有数据库、数据库的版本号更新的时候 再去建表。
查询 数据库中 是不是存在 同样的表 如果存在 也别创建了
onupgradeneeded 可以监听数据库版本号的变更
可以通过IDBDataBase里面的objectStoreNames 查看数据库里面 都创建了 哪些表名

var tableName = "note";
//    可以通过objectStoreNames获取到 已经建好表的名字
    if (!db.objectStoreNames.contains(tableName)){


    //    建表
        var objectStore = db.createObjectStore(tableName);
    //    创建表里面的字段
    //    创建字段的时候  需要 至少传入两个参数
    //    1.字段的名字 2.可以通过哪个名字  查找到 这个字段对应的内容
        objectStore.createIndex("title","title");
        objectStore.createIndex("content","content");
        objectStore.createIndex("date","date");
    }

3.增删改查的操作
1)db -> transaction()-> 事务的对象
2)事务的对象 -> objectStore
3)objectStore -> 增删改查

//添加数据
function addData(info) {
    //获得到事务的对象
    var transaction = database.transaction(["note"],"readwrite");
    //存放某一种类型数据的容器(类似类)
    var objectStore = transaction.objectStore("note");
//    执行增删改查的操作
    return objectStore.add(info);
}

完整js代码

(function(){    
    //声明数据库对象
    var database = null;
    //创建  打开数据库DB(database)
    function openDB(){
        var request = indexedDB.open("noteDB",7); // 创建 一个数据库    后面的数子代表数据库的版本号  没刷新一次  版本号就要更新一次  不然在第二次跟新的是很好就不会打印17行的this
        request.onerror = function(error){        //打开失败的方法
            console.log(error)
        }; 
        request.onsuccess = function(){             //打开成功
            console.log("打开数据库成功")
            database = this.result;
        };
        //只在 数据库版本号  两次不一致的情况下  调用  再次调用不执行
        request.onupgradeneeded = function(){       //刷新数据库
            //再见表的时候  不需要每次都去建表,可以在数据库更新版本号上午时候去创建版本号
            console.log("打开数据库成功",this);
            //获取数据库对象
            var db = this.result;

            //可以同objectStoreNames获取到已建好表的名字
            var tableName = "note";
            if(!db.objectStoreNames.contains(tableName)){
                //console.log("可以建表了");
            //创建表   keyPath既可以接受当前类的属性 也可以接受关系类的属性
                var objectStore = db.createObjectStore(tableName,{keyPath:"date"});
            //创建表里面的字段  
            //创建字段的时候 需要至少传入两个参数
            //1.字段的名字 2.可以通过那个名字 查找到相应的字段内容
                objectStore.createIndex("title","title");
                objectStore.createIndex("content","content");
                objectStore.createIndex("date","date")
            }

        };
    }   
    //添加数据方法
    function addData(info){
        //获得到事物的对象    传连个参数  第一个是一个note数组  第二个是   读取方式为读写
        //注意这里一个有三种读写数据的方式 readwrite(读写)readonly(只读) versionchange()
        var transaction=database.transaction(["note"],"readwrite")
        //存放某一只类型数据的容器(类似类)
        var objectStore = transaction.objectStore("note");
        //执行增删改查的操作
        console.log(objectStore.add(info))

    }   
    //获取html中的标签   并赋予点击事件
    function loadView(){
        var titleInput = document.querySelector(".addNoteView input");
        var contentInput = document.querySelector(".addNoteView textarea");
        var saveButton = document.querySelector(".addButton");
        saveButton.onclick=function(){
            var title = titleInput.value;
            var content = contentInput.value;
            var timeStamp = new Date().getTime();
            //把页面输入的信息数据一addData()传到数据库中
            addData({
                title:title,
                content:content,
                date:timeStamp
            })
        }
    }
    //浏览器是否支持
    function init(){
        if(!indexedDB){  //判断 当没有这个数据库的时候  跳出函数
            return;
        }
        openDB();    //在有这个数据库的是很好   调用函数打开数据库
        loadView();  //调用函数引入页面中的数据   传到数据库
    }
    init()
})()
相关文章
最新文章
热点推荐