使用 localStorage 儲存狀態
更新：DataTables 1.10 預設使用
localStorage來儲存狀態。此文章保留作為參考；請參考手冊以取得關於如何使用 DataTables 的最新說明。
撰寫軟體函式庫最大的挑戰之一，在於維護其 API 並確保升級到較新版本的函式庫盡可能地無痛。DataTables API 經歷了時間的考驗，但有時先前實作的某些功能在未來版本中可能不再理想。在此情況下，DataTables 1.9（beta 2）在狀態儲存方式上進行了重大變更，並且移除了兩個舊的初始化選項，取而代之的是更具彈性的選項。
在這篇文章中，我將解釋變更的內容、DataTables 1.9 的新功能，並展示如何利用這些改進，使用 localStorage 而非 Cookie 或任何其他您想使用的狀態儲存方式，來輕鬆實作表格的狀態儲存。
狀態儲存
DataTables 中的狀態儲存是透過將 JSON 字串儲存到 Cookie 中來完成的，使其盡可能保持瀏覽器相容性，同時將狀態儲存保留在用戶端。有時，能夠修改表格儲存的參數（新增您自己的參數或修改核心參數）會很有用，而 DataTables 1.8 透過兩個初始化選項提供了此功能
然而，實際使用這些選項遠非直觀，現在它們已被五個新的初始化選項取代，這些選項清楚地分離了實際儲存和載入資料的動作（fnStateSave 和 fnStateLoad）、定義和修改要儲存和載入的參數（fnStateSaveParams 和 fnStateLoadParams），以及在狀態載入時發出的通知（fnStateLoaded）。
- fnStateSave - 定義儲存狀態的邏輯
- fnStateLoad - 定義載入狀態的邏輯
- fnStateLoaded - 狀態已載入的通知
- fnStateSaveParams - 修改要儲存的狀態物件
- fnStateLoadParams - 修改已載入的狀態物件，然後重新載入狀態。
傳遞給每個函式的參數在上面連結的文件中都有完整定義。這些新函式的一個主要優點是，它們會為您提供一個可操作的 JavaScript 物件，而不是像以前那樣必須處理的字串，這讓生活變得更加輕鬆！fnStateSave 和 fnStateLoad 的預設行為仍然是使用內部的 Cookie 儲存程式碼，但如下所示，這可以很容易地更改為以您想要的任何方式儲存狀態。
不要變更 API！
在至少提前一個主要版本不建議使用變更的 API 的情況下移除 API 是例外情況，並且不是 DataTables 專案普遍會採用的模式，但在這種情況下，狀態儲存 API 非常難以使用，並且由於這個事實而很少使用。因此，我認為採取這個步驟是正確的 - 如果有人目前正在使用 fnStateLoadCallback 和 fnStateSaveCallback 初始化選項，並且希望更新到 1.9，請在論壇中貼出您目前的程式碼，我將提供免費支援來更新新方法的程式碼。
localStorage
Cookie 有許多缺點，例如需要增加 HTTP 頻寬和 4K 限制。W3C Web 儲存規範定義了 localStorage 作為一種本機儲存方法，我們可以在 DataTables 中使用它來儲存狀態，而不會有使用 Cookie 的固有問題。
為了使用 localStorage 儲存狀態，我們必須首先使用 bStateSave 初始化選項啟用狀態儲存，然後定義我們的 fnStateSave 和 fnStateLoad 函式。fnStateSave 將接收兩個參數，第一個是 DataTables 設定物件，第二個是我們想要儲存的狀態物件。為了儲存狀態，我們只需使用 localStorage.setItem 和 JSON.stringify (請注意，因此，這將不適用於不支援 localStorage 或具有內建 JSON 解析能力的瀏覽器)。然後，我們可以將 fnStateLoad 定義為一個函式，它將簡單地讀取我們儲存的物件，解析 JSON 並將其返回
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables', JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('DataTables') );
}
} );
} );
就是這樣！在沒有 Cookie 的缺點的情況下，使用 localStorage 儲存 DataTables 的設定。一個簡單且有用的修改是考慮到目前的網頁 URL，以防您在網域中使用多個 DataTables，因為 localStorage 是網域範圍的。我們可以透過 window.location.pathname 來實現這一點
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
}
} );
} );
使用這種方法，很容易看出您可以如何擴展它，以使用 Ajax 將狀態儲存在伺服器上的資料庫中（如果您這樣做，請注意 fnStateLoad Ajax 呼叫必須是同步的，因為沒有為非同步請求提供回呼）。
結論
<
p>總體而言，我希望您會同意這是一個對舊的、晦澀難懂的狀態儲存 API 非常受歡迎的更新，我期待看到如何使用新的 API，並希望您喜歡整體使用 DataTables 1.9。
如果您希望新增任何內容或有任何疑問，論壇中有一個關於這篇文章的評論和討論主題。