将表排序保存在本地存储中

save table sort in local storage

本文关键字：存储 存在 排序 保存      更新时间：2023-09-26

我希望能够刷新页面并仍然将我的表格排序为左侧。我想用本地存储而不是jQuery插件来做到这一点。

表格排序，但我不明白为什么 localStorage 不保存上次留下的顺序。

我在 localStorage 上做错了什么？

我有我的排序表函数，它在每次排序后调用 saveLocalStorage（） 函数。

function sort_book_table(tbody, col, asc) {
     ... sorts ...
     saveLocalStorage();
}
function saveLocalStorage(){
      var table_layout = $('#bookTable')[0].innerHTML;
      localStorage.setItem(table_layout);
}

提前感谢您的帮助

编辑：添加了快速小提琴 https://jsfiddle.net/1k901cdr/

本地存储对象

为源提供存储对象。

您错过了 localStorage.setItem(table_layout); 中的第二个参数。尝试以下代码片段，了解您在localStorage上的所有操作。

// Setting the Value.
localStorage.setItem("keyName", "value"); // Syntax
localStorage.setItem("table_layout", table_layout); // by variable
localStorage.setItem("table_layout", "dsdssd"); // by value
// Get the value.
localStorage.getItem("table_layout");
// Clear one item.
localStorage.removeItem("table_layout");
// Clear all items.
localStorage.clear();

参考：

https://www.w3.org/TR/webstorage/#the-localstorage-attribute
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStoragehttp://www.w3schools.com/html/html5_webstorage.asp

localStorage.setItem 需要一个键和一个值。

localStorage.setItem('foo'); // incorrect
localStorage.setItem('foo', 'bar'); // correct

您错过了键值。

localStorage.setItem('layout', table_layout);

根据Micah的回答，setItem 有两个参数，一个键和一个值。

localStorage.setItem('foo', 'bar'); // correct

但是，您似乎也试图将表的整个 HTML 保存在 localStorage 中。您应该只保存排序列和方向。下面是更新的函数，这些函数将保留排序的列和方向。

function sort_book_table(tbody, col, dir) {
    ... sorts ...
    saveLocalStorage(col, dir);
}
function saveLocalStorage(col, dir){
    localStorage.setItem('sortCol', col);
    localStorage.setItem('sortDir', dir);
}
相关文章：