使用 localstorage 在页面刷新时保持 html 不起作用

Question

我正在尝试将此 fiddle：http://jsfiddle.net/jaredwilli/ReT8n/ 集成到 fiddle 我正在做的：

https://jsfiddle.net/vlrprbttst/99c8gn7k/

基本上你有一个篮子，里面有一些物品，你可以添加或移除它们。我想要的是，在页面刷新时，.basket 的 html() 保存在本地存储中。我被困在这里：

https://jsfiddle.net/vlrprbttst/z8cffk4c/

我已将 forLocalStorage 变量放入点击处理程序中，否则 var 不会自行更新，但现在我猜测最终的本地存储代码

  if(localStorage.getItem('toDoData')) {
    forLocalStorage = localStorage.getItem('toDoData');
}

无法正常工作，因为它无法检索变量？

我试过四处走动，但我被困在这里。我做错了什么？

Answer 1

本地存储只能存储string key value pairs。我确保您传递的是一个字符串，还添加了一个函数来在刷新时填充购物车，这解决了问题。

function populateCart() {
    var items = localStorage.getItem('toDoData') || '';
    $('#cart').html(items);
}

在 document.ready 中添加了这个调用，就像这样：-

$(document).ready(function() {
    populateCart();
    // rest of code
});

工作 CodePen：http://codepen.io/owenayres/pen/oxKmZg

您可以在本地存储上进行一些简单的阅读 here。在我看来，最好的做法是将 HTML 的数据作为一些 JSON 存储在本地存储中，然后您将循环遍历并在读取此数据时重新生成 HTML再次.

Answer 2

设置变量后，您需要更新 DOM，例如：

 // LOCAL STORAGEEEEEEEE
  if (localStorage.getItem('toDoData')) {
    forLocalStorage = localStorage.getItem('toDoData');
    $('#cart').html(forLocalStorage);
    itemsCount();
  }

使用 localstorage 在页面刷新时保持 html 不起作用

using localstorage to keep html on page refresh not working

javascript

jquery

session-storage

local-storage