帶你瞭解遊戲陪玩系統原始碼前端常用的儲存方式

HTML5常用的幾種儲存方式

• 本地儲存：localStorage, sessionStorage, cookies
• 離線快取：application cache
• 前端資料庫：indexedDB, webSQL

cookie

• 「名稱：」 唯一標識cookie的名稱。cookie不區分大小寫，cookie名必須經過URL編碼。
• 「值：」 儲存在cookie裡的字串值，這個值必須經過URL編碼。
• 「域：」 cookie的有效域，傳送到這個域的所有請求都會包含對應的cookie。
• 「路徑：」 請求URL中包含這個路徑才會把cookie傳送到遊戲陪玩系統原始碼伺服器。
• 「過期時間：」 表示何時刪除cookie的時間戳。（即什麼時間之後就不會傳送到伺服器了）
• 「安全標識：」 設定之後，只在使用SSL安全連線的情況下才會把cookie傳送到伺服器。

• 不超過300個cookie
• 每個cookie不超過4096位元組（4kb)
• 每個域不超過20個cookie
• 每個域不超過81920位元組

name1=value1;name2=valve2;name3=value3

name=value; expires=expiration_time; path=domain_path; domain=domain_namel secure
//在所有這些引數中，只有cookie的名稱和值是必須的
document.cookie = `${encodeURIComponent('name')}=${encodeURIComponent('nanjiu')};domain=bettersong.github.io;`

document.cookie = 'uid=dkfywqkrhkwehf23;expires=' + new Date(0) + ';path=/;secure;

localStorage 和sessionStorage

• localStorage 永久儲存，除非手動刪除。
• sessionStorage儲存到瀏覽期關閉就消失了
• 每個域名給localStorage和sessionStorage分配的儲存空間時5M ，cookie是4kb

setItem('key','value')  // 儲存資料
getItem('key') // 讀取資料
remove('key') // 刪除資料
clear() // 清空

let obj = {
  name: '南玖',
  age: 18
}
localStorage.setItem('author',JSON.stringify(obj))
const author = JSON.parse(localStorage.getItem('author'))

• domain：儲存變化對應的域
• key：被設定或被刪除的鍵
• newValue：鍵被設定的新值，若被刪除則為null
• oldValue：鍵變化之前的值

window.addEventListener('storage', e=>{
    console.log(e.domain)
})

IndexedDB

• Database：通過open方法直接開啟

const db = indexDB.open('testDB');

• Object store：這個就是DB裡面具體儲存的物件。這個可對應SQL裡面的table內容。其儲存的結構為：

• Index：有點類似於外鏈，它本身是一種Object store，主要用來本體的store中，索引另外的object store裡面的資料。

// 建立 index
var myIndex = objectStore.index('lName');

• transaction: 事務其實就是一系列 CRUD 的集合內容。如果其中一個環節失敗了，那麼遊戲陪玩系統原始碼整個事務的處理都會被取消。
• cursor: 主要是用來遍歷 DB 裡面的資料內容。主要是通過 openCursor 來進行控制。

const request = indexedDB.open(dbName);
request.onerror = function(event) {
  // 錯誤處理程式。
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  // 設定 id 為 primaryKey 引數
  var objectStore = db.createObjectStore("customers", { keyPath: "id",{autoIncrement:true} });
  
  // 設定指定索引，並確保唯一性
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true });
};

const objectStore = db.createObjectStore("customers", { keyPath: "id",{autoIncrement:true} });

• keyPath: 用來設定主鍵的 key，具體區別可以參考下面的 keyPath 和 generator 的區別。
• autoIncrement: 是否使用自增 key 的特性。

objectStore.createIndex('indexName', 'property', options);

• indexName: 設定當前 index 的名字
• property: 從儲存資料中，指明 index 所指的屬性。

• unique: 當前 key 是否能重複 (最常用)
• multiEntry: 設定當前的 property 為陣列時，會給陣列裡面每個元素都設定一個 index 值。

// 建立一個名字叫 titleIndex 的 index，並且儲存的 index 不能重複
DB.createIndex('titleIndex', 'title', {unique: false});

• “readonly”：只讀
• “readwrite”：讀寫
• “versionchange”：這個不能手動指定，會在 upgradeneeded 回撥事件裡面自動建立。它可以用來修改現有 object store 的結構資料，比如 index 等。

const transaction = db.transaction(["customers"], "readwrite");
const objectStore = transaction.objectStore("customers");
 // 遍歷儲存資料
for (let i in customerData) {
  const request = objectStore.add(customerData[i]);
  request.onsuccess = function(event) {
    // success, done?
  };
}

const tx = db.transaction("books", "readwrite");
const store = tx.objectStore("books");
store.put({title: "aaaaa", author: "Fred", isbn: 1111});
store.put({title: "bbbbb", author: "Fred", isbn: 2222});
store.put({title: "ccccc", author: "Barney", isbn: 3333});
tx.oncomplete = function() {
  // All requests have succeeded and the transaction has committed.
};

const index = objectStore.index("username");
index.openCursor.onsuccess = function(event) {
  // 處理成功
};