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

雲豹科技程式設計師 發表於 2021-11-25
前端
隨著Web遊戲陪玩系統原始碼的出現,直接在客戶端儲存使用者資訊的需求也隨之出現。那麼我們前端常用的儲存方式有哪些呢?

HTML5常用的幾種儲存方式

  • 本地儲存:localStorage, sessionStorage, cookies
  • 離線快取:application cache
  • 前端資料庫:indexedDB, webSQL
帶你瞭解遊戲陪玩系統原始碼前端常用的儲存方式

cookie

HTTP cookie 通常也叫做cookie,最初用於在遊戲陪玩系統原始碼客戶端儲存會話資訊。「cookie是與特定域名繫結的,設定cookie後,它會與請求一起傳送到建立它的域。」 這個限制能保證cookie中儲存的資訊只對被認可的接收者開放,不被其它域訪問。
cookie的構成
  • 「名稱:」 唯一標識cookie的名稱。cookie不區分大小寫,cookie名必須經過URL編碼。
  • 「值:」 儲存在cookie裡的字串值,這個值必須經過URL編碼。
  • 「域:」 cookie的有效域,傳送到這個域的所有請求都會包含對應的cookie。
  • 「路徑:」 請求URL中包含這個路徑才會把cookie傳送到遊戲陪玩系統原始碼伺服器。
  • 「過期時間:」 表示何時刪除cookie的時間戳。(即什麼時間之後就不會傳送到伺服器了)
  • 「安全標識:」 設定之後,只在使用SSL安全連線的情況下才會把cookie傳送到伺服器。
限制
「因為cookie儲存在遊戲陪玩系統原始碼客戶端機器上,所以為保證它不會被惡意利用,瀏覽器會施加限制。」
  • 不超過300個cookie
  • 每個cookie不超過4096位元組(4kb)
  • 每個域不超過20個cookie
  • 每個域不超過81920位元組
JavaScript中的cookie
在JavaScript中處理cookie比較麻煩,因為介面過於簡單,只有**「BOM」** 的document.cookie屬性。
獲取cookie
document.cookie返回包含遊戲陪玩系統原始碼頁面中所有有效cookie的字串,以分號分隔;
name1=value1;name2=valve2;name3=value3
「所有名和值都是URL編碼,因此必須使用decodeURIComponent()解碼」
設定cookie
name=value; expires=expiration_time; path=domain_path; domain=domain_namel secure
//在所有這些引數中,只有cookie的名稱和值是必須的
document.cookie = `${encodeURIComponent('name')}=${encodeURIComponent('nanjiu')};domain=bettersong.github.io;`
刪除cookie
「沒有直接刪除已有cookie的方法,但可以通過設定其過期時間來達到刪除效果;」
document.cookie = 'uid=dkfywqkrhkwehf23;expires=' + new Date(0) + ';path=/;secure;
cookie是如何工作的?
「request:」當遊戲陪玩系統原始碼發起一個請求時,瀏覽器會自動檢查是否有相應的cookie,如果有則將cookie新增到Request Headers的Cookie欄位中
帶你瞭解遊戲陪玩系統原始碼前端常用的儲存方式

「response:」當遊戲陪玩系統原始碼伺服器需要cookie時,在http請求的Response Headers欄位中新增Set-Cookie欄位,瀏覽器接收到之後會自動解析識別,將cookie種下。
帶你瞭解遊戲陪玩系統原始碼前端常用的儲存方式

localStorage 和sessionStorage

localStorage只要在相同的協議,域名,埠下就能讀取或修改同一份localStorage資料,sessionStorage物件只儲存會話資料,這意味著資料只會儲存到瀏覽器關閉。「sessionStorage除了協議,域名,埠外,還要求在同一視窗下。」
  • localStorage 永久儲存,除非手動刪除。
  • sessionStorage儲存到瀏覽期關閉就消失了
  • 每個域名給localStorage和sessionStorage分配的儲存空間時5M ,cookie是4kb
方法
setItem('key','value')  // 儲存資料
getItem('key') // 讀取資料
remove('key') // 刪除資料
clear() // 清空
「⚠️注意:Storage型別智慧儲存字串。遊戲陪玩系統原始碼非字串資料在儲存之前會自動轉換為字串,並且這種轉換不能在獲取資料時撤銷,也就是說你在獲取storage資料時,拿到的一定是字串,需要自己手動轉」
儲存JSON物件的資料
Storage是以字串儲存資料的,所以在儲存JSON格式的資料之前,最好把資料轉化為字串,這個操作叫**「序列化」**
let obj = {
  name: '南玖',
  age: 18
}
localStorage.setItem('author',JSON.stringify(obj))
const author = JSON.parse(localStorage.getItem('author'))
localStorage與sessionStorage的異同
「相同點:」 兩者的API完全相同,都是在遊戲陪玩系統原始碼瀏覽器端儲存資料,儲存大小都是5M 「不同點:」
1、localStorage儲存的資料是永久性資料,遊戲陪玩系統原始碼頁面重新整理,即使瀏覽器重啟,甚至作業系統重啟也不會丟失,並且儲存的資料在同源(協議、域名、埠號一致)下的標籤頁和window視窗之間共享。 2、sessionStorage儲存的資料有些苛刻,遊戲陪玩系統原始碼頁面重新整理仍然有效,選項卡關閉時資料丟失。但是在相同標籤頁開啟的多個iframe之間資料可以共享(同源的情況下)。
儲存事件
每當Storage物件發生變化時,都會觸發storage事件。(增刪改查) 這個事件的時間物件有4個屬性:
  • domain:儲存變化對應的域
  • key:被設定或被刪除的鍵
  • newValue:鍵被設定的新值,若被刪除則為null
  • oldValue:鍵變化之前的值
window.addEventListener('storage', e=>{
    console.log(e.domain)
})
「對於sessionStorage和localStorage上的任何更改都會觸發storage事件,但storage事件不會區分這兩者」

IndexedDB

Indexed Database API簡稱 IndexedDB,是遊戲陪玩系統原始碼瀏覽器中儲存結構話資料的一個方案。IndexedDB用於代替目前已廢棄的 Web SQL
基本概念
  • 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 });
};
建立 Object Store
使用的方法就是 IDBDatabase 上的 createObjectStore 方法。
const objectStore = db.createObjectStore("customers", { keyPath: "id",{autoIncrement:true} });
  • keyPath: 用來設定主鍵的 key,具體區別可以參考下面的 keyPath 和 generator 的區別。
  • autoIncrement: 是否使用自增 key 的特性。
「建立的 key 主要是為了保證,在資料插入時唯一性的標識。」
設定索引 index
在完成 PK(Primary key) 建立完畢後,為了遊戲陪玩系統原始碼更好的搜尋效能我們還需要額外建立 index。這裡可以直接使用:
objectStore.createIndex('indexName', 'property', options);
  • indexName: 設定當前 index 的名字
  • property: 從儲存資料中,指明 index 所指的屬性。
其中,options 有三個選項:
  • unique: 當前 key 是否能重複 (最常用)
  • multiEntry: 設定當前的 property 為陣列時,會給陣列裡面每個元素都設定一個 index 值。
// 建立一個名字叫 titleIndex 的 index,並且儲存的 index 不能重複
DB.createIndex('titleIndex', 'title', {unique: false});
增刪資料
在 IndexedDB 裡面進行資料的增刪,都需要在 transaction 中完成。而這個增刪資料,大家可以理解為一次 request,相當於在一個 transaction 裡面管理所有當前邏輯操作的 request。所以,在正式開始進行資料操作之前,還需要給大家簡單介紹一些如果建立一個事務。
事務的建立
transaction API,在建立時,你需要手動指定當前 transaction 是那種型別的操作,基本的內容有:
  • “readonly”:只讀
  • “readwrite”:讀寫
  • “versionchange”:這個不能手動指定,會在 upgradeneeded 回撥事件裡面自動建立。它可以用來修改現有 object store 的結構資料,比如 index 等。
你可以通過在遊戲陪玩系統原始碼資料庫開啟之後,通過 IDBDataBase 上的 transaction 方法建立
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.
};
索引資料
索引資料是遊戲陪玩系統原始碼所有資料庫裡面最重要的一個。這裡,我們可以使用index 來做。例如,通過 index 來快速索引 key 值
const index = objectStore.index("username");
index.openCursor.onsuccess = function(event) {
  // 處理成功
};
本文轉載自網路,轉載僅為分享乾貨知識,如有侵權歡迎聯絡雲豹科技進行刪除處理


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996194/viewspace-2844165/,如需轉載,請註明出處,否則將追究法律責任。