資料持久

資料持久指將記憶體中的資料模型轉化為儲存模型，和將儲存模型轉化為記憶體中的資料模型這一過程的統稱。在普通情況下，相親交友原始碼儲存的資料會一直保留，直到我們刪除相關內容；或者是這些資料儲存到瀏覽器會話結束，使用者關閉之後。
但在相親交友原始碼實際情況中會更加複雜一些。使用者、作業系統、瀏覽器或外掛都可以隨時阻止或刪除持久資料。瀏覽器有許可權刪除儲存內容比較陳舊或者是比較大的專案內容；還能記錄頁面狀態，當我們離開當前頁面，重新開啟相親交友原始碼頁面的時候上次記錄的內容會得到儲存記錄，可以直接使用。

使用場景

當相親交友原始碼資料並不需要傳送到web伺服器或者並不需要資料內容時，只需要在瀏覽器中儲存和運算元據（也叫客戶端）會用到資料持久，而需要在瀏覽器中儲存和運算元據具體包括以下幾種情況：

保留相親交友原始碼客戶端應用程式的狀態—例如當前螢幕、輸入的資料、使用者首選項等
訪問本地資料或檔案並有嚴格隱私要求的實用程式
離線工作的漸進式web應用程式（PWA）

接下來將為大家詳細比較10中不同的相親交友原始碼客戶端儲存方式，包括這些方法的限制、優缺點以及每種方式的使用，方便大家選擇根據自己的使用場景進行選擇。

JavaScript變數
DOM節點（DOM node）儲存
Web儲存（localStorage和sessionStorage）
IndexedDB/索引資料-
Cache API（不使用AppCache）
檔案系統訪問API
檔案和目錄項API
cookies
window.name
WebSQL

總體比較

1.1.png

文字將從容量、讀寫速度、資料持久三個角度進行比較這十種方式，接下來為大家介紹詳細內容。

1.JavaScript變數

將狀態儲存在JavaScript變數中是最快、最簡單的，例子如下：

優勢

在相親交友原始碼開發中易於使用
快捷
不需要序列化或反序列化

缺點

易失：重新整理或者關閉標籤會清除所有內容
第三方指令碼可以檢查或覆蓋全域性（視窗）值

如果你已經在使用JS變數，可以考慮在page unloads時永久儲存變數狀態

2.DOM節點（DOM node）儲存

大多數DOM元素，無論是在相親交友原始碼頁面上還是在記憶體中，都可以在命名屬性中儲存值。使用以data-為字首的屬性名稱更安全：

該屬性不會關聯HTML
可以通過資料集屬性而不是較長的.setAttribute和.getAttribute方法訪問值儲存為字串，因此可能需要序列化和反序列化。例如：

優勢

可以在JavaScript或HTML中定義值，例如
用於相親交友原始碼儲存特定元件的狀態
DOM速度過快

缺點

易碎：重新整理或關閉相親交友原始碼當前內容會清除所有內容（除非伺服器將值傳遞到HTML中）
字串需要序列化和反序列化
較大的DOM會影響效能
第三方指令碼可以檢查或覆蓋值

DOM節點儲存比變數慢。在將元件的狀態儲存在HTML中是可行的情況下，使用的時候需要注意這一點。現在這種方式已經被逐漸淘汰，原因是DOM節點生成樹的儲存速度過慢，在相親交友原始碼中的效率十分低下。不過為了解決這個問題現在HTML 5的Canvas已有了詳盡的解決方案，比如SpreadJS純前端表格元件已經引入了Canvas繪製模型和雙快取畫布技術，使專案效率大大提升。

3.Web儲存（localStorage和sessionStorage）

Web儲存提供了兩個類似的api來定義名稱/值對：

window.localStorage：儲存持久資料
•- window.sessionStorage：在瀏覽器選項內容保持開啟狀態時僅保留會話資料

使用.setItem方法儲存或更新命名項：

使用.getItem方法進行檢索：

使用.removeItem方法刪除：

優勢

簡單名稱/值對API
有會話和持久儲存選項
良好的瀏覽器支援

缺點

僅字串：需要序列化和反序列化
無事務、索引或搜尋的非結構化資料
相親交友原始碼同步訪問將影響大型資料集的效能

Web儲存非常適合於更簡單、更小、特別的值。儲存大量結構化資訊不太實用，但是我們可以通過在相親交友原始碼頁面解除安裝時寫入資料來避免效能問題。

4.IndexedDB/索引資料庫

IndexedDB提供了一個類似NoSQL的低階API來儲存大量資料。可以進行索引儲存，使用事務更新儲存，並使用非同步方法搜尋儲存。
IndexedDBapi很複雜，需要一些事件處理。以下函式在傳遞名稱、版本號和可選升級函式（在版本號更改時呼叫）時開啟資料庫連線：

下面內容連線到myDB資料庫並初始化todo物件儲存（類似於SQL表或MongoDB集合）。然後定義一個名為id的自動遞增鍵：

資料庫連線就緒後，可以在事務中新增新資料項：

此時可以檢索值

優勢

具有最大空間的靈活資料儲存
強大的事務、索引和搜尋選項
良好的瀏覽器支援

缺點

回撥複雜，API基於相親交友原始碼事件
IndexedDB可以儲存大量資料，但需要使用諸如idb、Dexie.js或JsStore之類的包裝器庫。

5.Cache API

Cache API為HTTP請求和響應物件對提供儲存。您可以建立任意數量的命名快取來儲存任意數量的網路資料項。

API通常對快取漸進式web應用進行網路響應。當裝置與網路斷開連線時，重新提供快取內容，以便web應用程式可以離線執行。

以下程式碼將網路響應儲存在名為myCache的快取中：

類似的函式可以從快取中檢索項。下面的例子中，它返回響應正文文字：

優勢

儲存相親交友原始碼中任何網路響應
可以提高web應用程式效能
允許web應用程式離線執行
基於Promise的現代API

缺點

不適用於儲存應用程式狀態
在漸進式web應用程式之外不太有用
蘋果對PWAs和Cache API並不友好

Cache API是儲存從網路檢索的檔案和資料的最佳選擇。我們可以使用它來儲存應用程式狀態。

6.檔案系統訪問API

檔案系統訪問API允許瀏覽器從本地檔案系統讀取、寫入、修改和刪除檔案。瀏覽器在沙盒環境中執行，因此相親交友原始碼使用者必須授予對特定檔案或目錄的許可權。這將返回一個FileSystemHandle，以便web應用程式可以像桌面應用程式一樣讀取或寫入資料。

以下函式將Blob儲存到本地檔案：

優勢

web應用程式可以安全地讀取和寫入本地檔案
不需要在伺服器上上傳檔案或處理資料

缺點

只有最低限度的瀏覽器支援（僅限Chrome）
API會發生更改

這種儲存方式的優勢幾乎是壓倒性的，適合在相親交友原始碼開發中使用。

7.檔案和目錄項API

檔案和目錄條目API提供了一個可用於域的檔案系統，該系統可以建立、寫入、讀取和刪除目錄和檔案。

優勢

存在一些可探索的有趣用法

缺點

實現和行為之間的非標準、不相容可能會改變

不過目前MDN明確宣告：不要在生產站點上使用此選項，技術廣泛的支援還需要幾年。

8.cookies

Cookie是特定於域的資料，用來跟蹤相親交友原始碼使用者，但對於任何需要維護伺服器狀態的系統（如登入）來說，它們都是必不可少的。與其他儲存機制不同的是，cookies（通常）在瀏覽器和伺服器之間的HTTP請求和響應上傳遞。兩個裝置都可以檢查、修改和刪除cookie資料。
使用document.cookie在客戶端中設定cookie值，使用方法：