Html5中數據存儲的方式

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");
    }

增刪改查的操作
1）db -> transaction()-> 事務的對象2）事務的對象-> objectStore3）objectStore -> 增刪改查
添加數據
functionaddData(info) {
returnobjectStore.add(info);
}
查詢數據GetgetAll functionsearchAll() {
returndatabase.transaction([“note”],”readonly”).objectStore(“note”).getAll();
}
會得到一個IDBRequest對象，可以通過監聽成功事件獲得到查詢到的數據searchAll().onsuccess=function() {
console.log(this.result);
};
如果查詢單個key對應的數據可以通過get(key)database.transaction([“note”],”readonly”).objectStore(“note”).get(1502242969880).onsuccess=function() {
console.log(this);
};
刪除數據
.delete(1502242969880).onsuccess=function() {
console.log(this);
};
更新數據
. put({title:”更新數據”,content:”更據”,date:1502183031380}).onsuccess=function() {
console.log(this);
};
需要注意的事項：任何數據庫的操作更新字段、表需要先清除原來的數據庫如果是查找、刪除、修改具體的內容的時候需要根據一個唯一值查找

//添加數據
function addData(info) {
    //獲得到事務的對象
    var transaction = database.transaction(["note"],"readwrite");
    //存放某一種類型數據的容器（類似類）
    var objectStore = transaction.objectStore("note");
//    執行增刪改查的操作
    return objectStore.add(info);
}

//查詢數據的方法
    function searchAll(){
        return  database.transaction(["note"],"readonly").objectStore("note").getAll();
    }
    //get查詢方法
    function search(){
        database.transaction(["note"],"readonly").objectStore("note").get(1502194444741).onsuccess=function(){
            console.log(this);
        }
    }

//刪除的方法
    function deleteData(){
        database.transaction(["note"],"readwrite").objectStore("note").delete(1502194444741).onsuccess=function(){
            console.log(this.result);
        }
    }

//更新的方法
    function update(){
        database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新的數據",content:"更新的數據",date:1502183031380}).onsuccess=function(){
            console.log(this);
        }
    }

完整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;

            //console.log(searchAll())
            searchAll().onsuccess = function(){
                console.log(this.result)
            }
            //調用get查詢方法
            search()
            //刪除方法
            deleteData()
            //更新方法
            update()
        };
        //只在 數據庫版本號  兩次不一致的情況下  調用  再次調用不執行
        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))

    }   
    //查詢數據的方法
    function searchAll(){
        return  database.transaction(["note"],"readonly").objectStore("note").getAll();
    }
    //get查詢方法
    function search(){
        database.transaction(["note"],"readonly").objectStore("note").get(1502194444741).onsuccess=function(){
            console.log(this);
        }
    }

    //刪除的方法
    function deleteData(){
        database.transaction(["note"],"readwrite").objectStore("note").delete(1502194444741).onsuccess=function(){
            console.log(this.result);
        }
    }

    //更新的方法
    function update(){
        database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新的數據",content:"更新的數據",date:1502183031380}).onsuccess=function(){
            console.log(this);
        }
    }
    //獲取html中的標籤   並賦予點擊事件
    function loadView(){
        var titleInput = document.querySelector(".addNoteView input");
        var contentInput = document.querySelector(".addNoteView textarea");
        var saveButton = document.querySelector(".addButton");
        saveButton.οnclick=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()
})()

Html5中數據存儲的方式

致遠OA及相關OA系統集成與二次開發

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

【面試準備】項目經驗——接口自動化項目

數組遍歷區分父子級重排遍歷多維數組

關鍵幀動畫，摺疊面板（parseFloat,requestAnimationFrame,cancelAnimationFrame）

web前端 H5 百度地圖API 案列

webpack（process.env.NODE_ENV）build打包自動區分環境

file 獲取本地文件路徑（圖片）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結