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

我希望能够刷新页面，并将我的表仍按左键排序。我希望使用本地存储而不是jQuery插件来实现这一点

表进行排序，但我不明白为什么本地存储没有保存上次保留的顺序

本地存储有什么问题

我有一个sort table函数，它在每次排序后调用saveLocalStorage（）函数

function sort_book_table(tbody, col, asc) {
     ... sorts ...
     saveLocalStorage();
}

function saveLocalStorage(){
      var table_layout = $('#bookTable')[0].innerHTML;
      localStorage.setItem(table_layout);
}

提前谢谢你的帮助

---

编辑：添加了quick fiddle

localStorage。setItem

需要一个键和一个值

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

---

localStorage.setItem

需要一个键和一个值

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

---

你错过了关键值

localStorage.setItem('layout', table_layout);

---

你错过了关键值

localStorage.setItem('layout', table_layout);

---

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

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

localStorage.setItem（'foo'，'bar'）；//正确

但是，您似乎还试图将表的整个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);
}

---

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

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

localStorage.setItem（'foo'，'bar'）；//正确

但是，您似乎还试图将表的整个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);
}

localStorage对象为原点提供存储对象

您错过了

localStorage.setItem（表\u布局）中的第二个参数。在
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();

参考资料：






localStorage对象为原点提供存储对象

您错过了
localStorage.setItem（表\u布局）中的第二个参数。在
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();

参考资料：





请确保您对问题中的情况有最少的描述。首先，你是如何“分类”事情的。您如何重新加载/获取项目？杰罗恩道歉道。我将在几秒钟内发布一个快速的提琴。在浏览器控制台中查找错误！应该告诉你你不能设置数据way@Jeroen补充fiddle@Modelesq，检查我的答案，了解本地存储的所有操作和参考url，这将有助于您全面理解。请确保您对问题中的情况有最低限度的描述。首先，你是如何“分类”事情的。您如何重新加载/获取项目？杰罗恩道歉道。我将在几秒钟内发布一个快速的提琴。在浏览器控制台中查找错误！应该告诉你你不能设置数据way@Jeroen补充fiddle@Modelesq，检查我的答案，了解localStorage的所有操作和参考url，这将帮助您理解overallIt似乎不希望在重新加载后保存状态。我是否应该在sort_book_table函数中调用saveLocalStorage？重新加载后，在呈现表之前，需要从本地存储中检索保存的排序列和方向，并在第一次呈现时使用这些值对表进行正确排序。它似乎不希望在重新加载后保存状态。我是否应该在sort_book_table函数中调用saveLocalStorage？重新加载后，在呈现表之前，需要从本地存储中检索保存的排序列和方向，并在第一次呈现时使用这些值对表进行正确排序。