如何在Web Browser localstorage中存儲20000個表行的記錄？

Question

我有一項任務是將所有記錄存儲到瀏覽器本地存儲並顯示它，我必須使用它來搜索數據排序並在視口中顯示結果。 我更喜歡使用WebSql，但它不支持所有瀏覽器。 我正在尋找實施它的指導，但在搜索或排序時它不會影響瀏覽器的性能。

我嘗試使用websql

var result，name，version，display_name，size

name         = 'listofdata'
version      = 1.0
display_name = 'listofdata'
size         = 2621440 

// parameters: name, version, display name, size (in bytes)
db = window.openDatabase(name, version, display_name, size)

result = 'Database "' + display_name + '" created'
addResult(result, createDB)

我也想在其他瀏覽器中處理，但不知道它。

Answer 1

首先，確保您的20K記錄能夠符合localStorage的5MB存儲限制。

現在來：

我正在尋找實施它的指導，但在搜索或排序時它不會影響瀏覽器的性能。

第一種方法：對於排序和搜索，最好的選擇（邏輯上和性能方面）是將所有記錄存儲到localStorage的單個JSON字符串化數組中，然后使用Array對象的.filter()和.sort()方法分別搜索和整理它們。 請記住，遍歷20K記錄可能需要幾秒鍾 （大約1-4秒左右，具體取決於機器的處理能力）。 如果您想一次訪問和處理所有記錄，這種方法將非常方便。

第二種方法：使用某種主/唯一密鑰單獨存儲每條記錄，以識別它們中的每一條。 然后在需要時，只需獲取所需的一個，就像通常從localStorage獲取任何鍵值對一樣。 至於搜索和排序，你可以使用Object.keys()和Object.entries()來快速獲取所有記錄，然后使用相同的.filter()和.sort()方法進行搜索和排序。做法。

您不一定要使用indexeddb或SQL數據庫。 它可以使用localStorage實現 ，只是它可能只適用於小記錄以及在很可能永遠不會發生擴展的情況下。