HTML Storage-LocalStorage

• 儲存資料語法：

  localStorage.setItem("key", "value");
  

• 讀取資料語法：

  localStorage.getItem("key");
  

• 刪除資料語法：

  localStorage.removeItem("key");
  

• 清空 localStorage

  localStorage.clear();
  

• 獲取鍵

  localStorage.key(i);
  

• 監聽 storage

  if (window.addEventListener) {
    window.addEventListener("storage", onStorageChange);
  } else if (window.attachEvent) {
    window.attachEvent("onstorage", onStorageChange);
  }
  function onStorageChange(e) {}
   
  

  storage 事件裡的 e 是一個 StorageEvent 物件。 有如下屬性

  Attribute	Type	Function
  key	String	added, removed, or moddified
  oldValue	Any	old value,or null if a new item was added
  newValue	Any	new value,or null if a new item was removed
  url/uri	String	page causing change

  • ipad 上的造成 storage 變化的頁面的引數名是 uri
  • !!! 特別注意的是，該事件不在導致資料變化的當前頁面觸發。
    • 如果瀏覽器同時開啟一個域名下面的多個頁面，當其中的一個頁面改變 sessionStorage 或 localStorage 的資料時，其他所有頁面的 storage 事件會被觸發，而原始頁面並不觸發 storage 事件。可以通過這種機制，實現多個視窗之間的通訊。

localStorage 的侷限

1. 瀏覽器在 IE8 以上的 IE 版本才支援 localStorage 這個屬性。
2. 目前所有的瀏覽器中都會把 localStorage 的值型別限定為 string 型別。
3. localStorage 本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡。
4. localStorage 不能被爬蟲抓取到。
5. 在 iPhone/iPad 上有時設定 setItem()時會出現詭異的 QUOTA_EXCEEDED_ERR 錯誤，這時一般在 setItem 之前，先 removeItem()就 ok 了。

查詢是否支援 localStorage

if (!window.localStorage) {
  alert("瀏覽器不支援localstorage");
  return false;
} else {
  //主邏輯業務
}

localStorage 只能儲存字串

JSON

let data = {
  name: "white",
  age: 18,
};
window.localStorage.setItem("user", JSON.stringify(data));
JSON.parse(window.localStorage.getItem("user"));

Array

let arr = ["h", "e", "l", "l", "o"];
window.localStorage.setItem("array", arr.join(","));
window.localStorage.getItem("array").split(",");

HTML Storage-SessionStorage

• 儲存資料語法：

  sessionStorage.setItem("key", "value");
  

• 讀取資料語法：

  sessionStorage.getItem("key");
  

• 刪除資料語法：

  sessionStorage.removeItem("key");
  

• 清空 localStorage

  sessionStorage.clear();
  

• 獲取鍵

  sessionStorage.key(i);
  

• Chrome 瀏覽器，_blank 方式新開視窗，sessionStorage 儲存的資料會丟失。

  解決方案：opener獲取到源頁面的部分控制權

  <a href="***" target="_blank" rel="opener noreferrer nofollow ugc">走</a>
  

應用場景

1. 需求方要求使用者在一個列表頁瀏覽時，點選一個列表進入詳情頁，返回要求記錄使用者剛剛瀏覽的位置，而不是重新重新整理頁面到了頁面頂部。（ps：如果使用者好不容易翻到了第幾十、幾百乃至幾千條時，難道要使用者再重頭開始？可能這個時候跳出率就高了）。
   1. 頁面滾動，將滾動位置存到 session 中
   2. 再次進到頁面中，到 session 中取出上次儲存的瀏覽位置
   3. 滾動到對應位置

$(window).scroll(function () {
  if ($(document).scrollTop() != 0) {
    sessionStorage.setItem("offsetTop", $(window).scrollTop()); /*儲存滾動位置*/
  }
});
/*onload時，取出並滾動到上次儲存位置*/
window.onload = function () {
  var _offset = sessionStorage.getItem("offsetTop");
  $(document).scrollTop(offsetTop);
};

原文連結： https://blog.csdn.net/oaa608868/article/details/53539954

2. 分頁跳轉時多選框中選中的值在跳轉到第二頁時資料無法儲存
   1. 選中時往 sessionStorage 新增一條資料
   2. 取消選中時 sessionStorage 移除一條資料
   3. 提交時從 sessionStorage 遍歷取出資料

 $('#tbody').on('click', '.ops', function() {//單個
    if($(this).is(':checked')) {
        var obj = {
			id: $(this).val(),
			name: $(this).data('name')
		};
        sessionStorage.setItem($(this).val(),JSON.stringify(obj));//將物件轉為json字串儲存
    } else {
        sessionStorage.removeItem($(this).val());//當多選點選取消是移除session
    }
})
var len =sessionStorage.length;//獲取session中值的長度,以便遍歷
for(var i = 0; i< len; i++) {
    var key = sessionStorage.key(i);
    var sessionObj = JSON.parse(sessionStorage.getItem(key));
    ...
}
sessionStorage.clear();//資料處理完記得清空

HTML Storage-WebSQL

1. openDatabase：這個方法使用現有的資料庫或者新建的資料庫建立一個數據庫物件。
   openDatabase(db_name, version, describe, db_size, callback)

   • callback 會在建立資料庫後被呼叫。

   var db = openDatabase("mydb", "1.0", "Test DB", 2 * 1024 * 1024);
   

2. transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。

   db.transaction(function (tx) {
     tx.executeSql("CREATE TABLE IF NOT EXISTS LOGS (id unique, log)");
   });
   

3. executeSql：這個方法用於執行實際的 SQL 查詢。

   tx.executeSql( sqlquery,[],dataHandler,errorHandler )

   • 執行executeSql後，dataHandler回撥函式中有一個引數result。其資料型別為 SQLResultSet 。

   • SQLResultSet{insertId [long], rowsAffected [long], rows[SQLResultSetRowList]}

     • insertId：是執行插入操作時，表示資料第幾個插入到表中，插入多個數據時，返回最後一個數據對應的序號
     • rowsAffected：表示被影響的行數，例如，執行更新操作，更新了一個數據，那麼它為1
     • rows：返回一個 SQLResultSetRowList 型別的資料。SQLResultSetRowList{length [long], item}

   • 建立表

     db.transaction(function (tx) {
       tx.executeSql("CREATE TABLE IF NOT EXISTS LOGS (id unique, log)");
     });
     

   • 刪除表

     db.transaction(function (tx) {
       tx.executeSql("DROP TABLE LOGS",[],function(){
           alert('DROP TABLE SUCCEED');
       },function(){
           alert('DROP　TABLE FAILED');
       });
     });
     

   • 插入資料

     db.transaction(function (tx) {
       tx.executeSql("INSERT INTO LOGS (id,unique,log) VALUES (?, ?, ?)", [ e_id, e_unique, e_log, ]);
     });
     

   • 查詢資料

     db.transaction(function (tx) {
       tx.executeSql( "SELECT * FROM LOGS", [], function (tx, results) {
           var len = results.rows.length, i, msg = "<p>查詢記錄條數: " + len + "</p>";
           document.querySelector("#status").innerHTML += msg;
           for (i = 0; i < len; i++) {
             alert(results.rows.item(i).log);
           }
         }, null );
     });
     

   • 刪除資料

     db.transaction(function (tx) {
       tx.executeSql("DELETE FROM LOGS WHERE id=?", [id]);
     });
     

   • 更新資料

     db.transaction(function (tx) {
       tx.executeSql("UPDATE LOGS SET log='www.w3cschool.cc' WHERE id=?", [id]);
     });
     

是否支援WebSQL

if (window.openDatabase) { // 操作 web SQL        
} else {
     alert('當前瀏覽器不支援 webSQL !!!');
}

W3C規範

連結： https://www.w3.org/TR/webdatabase/#dom-sqltransaction-sync-executesql

該規範不再處於積極維護中，Web 應用程式工作組不打算進一步維護它。

特點

• 有更大的儲存空間（可自定義設定），跨域讀寫，儲存結構自由等特點。
• 關閉視窗不會自動清除
• 資料儲存以表格形式而不是鍵值對