如何让按钮保存对本地存储所做的任何更改？

Question

An answer 到 this question 可以将特定对象上的切换类保存到本地存储，这很有帮助，但不完全是我需要的。当没有很多解释性的 cmets 时，我并不擅长修改代码。

这是答主的JS：

if (typeof(localStorage) == 'undefined') {
  document.getElementById("result").innerHTML =
    'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
$(".item").each(function(i, el) {
  if (localStorage['fav' + i] == 'favorites') {
    $(this).addClass('favorites');
  }
});
}
$(document).ready(function() {
  $('.btn').on('click', function() {
    var $item = $(this).closest('.item');
    var index = $('.item').index($item);
    //$(".item").removeClass('favorites');
    //localStorage.removeItem('background');
    $item.toggleClass('favorites');
    if ($item.hasClass('favorites')) {
      console.log(index)
      localStorage.setItem('fav' + index, 'favorites');
    } else {
      localStorage.removeItem('fav' + index);
    }
  });
});

但我希望有一种方法可以让按钮保存对页面所做的任何更改。我正在开发一个交互性很强的页面，并且具有内容可编辑的元素、可扩展的菜单和可突出显示的段落。我希望有一个保存按钮来保存已编辑的文本、打开的菜单以及突出显示的段落。

有没有办法做到这一点，而不必为每个交互元素编辑 jquery？

Answer 1

听起来您只是想要一种将整个页面状态保存到本地存储的方法。

如果我要这样做，我可能会为每个需要状态的元素创建一个不同的本地存储项，以使事物清晰有序。

所以你需要一种方法将你的状态转换为本地存储字符串并解析回之后的状态

将你的状态保存在这样的对象中是可行的

state = {
    'menu1': 'open',
    'menu2': 'closed',
    'textinput1': {'text': '' /*put text here*/, 'highlighted': '57-159'} //characters 57-159 are highlighted
}
//or if you want things to be as simple as possible
state = {
    'menu1': 'open',
    'menu2': 'closed',
    'textinput1-text': '' /*put text here*/,
    'textinput1-highlighted: '57-159'} 
}
//and then reading through the state
for (item in state) {
    if (state.hasOwnProperty(item)) {
        //convert the state into a single string for each item
        //then set the local storage item
        localStorage.setItem(item,stringstate)
    }
}

如果你用'textinput1'（它实际上拥有一个自己的对象）做了我上面所做的事情，请小心。您可能希望为每个内部项目提供自己的本地存储项目，如下所示：

'textarea1-text' and 'textarea1-highlighted'

如果您还没有使用这样的单一状态，可能很难重新编写代码来执行此操作，但如果您拥有所有这些东西，那么将新东西添加到本地存储会更容易

或者，如果您的网页中有多个组件，您可以为每个组件设置一个状态

将本地存储项转换回状态：

for (item in state) {
    if (state.hasOwnProperty(item){
        state.item = localStorage.getItem(item)
    }

然后，每当您想将状态保存到本地存储时，这很容易，因为您已经拥有所有内容的状态 您可以在对网页上的任何内容进行单个更改时随时更新状态，或者如果状态仅在用户尝试保存时才重要，您可以在单击按钮时立即更新状态，然后立即保存到本地存储

希望对您有所帮助，如果这不是您要的方法，请见谅

编辑：

抱歉，状态的概念如此混乱，我可能没有很好地解释我的意思。因此，您希望有一个按钮来保存通过将它们保存到本地存储所做的任何更改。您从其他人的答案中获得的切换想法对于诸如打开或关闭菜单之类的事情很有用，因为它只能处于“打开”或“关闭”位置，但是如果您想保存文本以及文本是什么突出显示，那么您当然需要保存更多信息。

您说您拥有所有这些元素，例如菜单和文本元素。您可以拥有一个对象（随意命名）。我们暂时称它为状态。

所以

var state = {}

该对象是一个单一的地方，您可以在其中存储各种元素的所有不同状态。你可以有一个菜单是打开还是关闭的状态。

如果切换菜单打开的 jquery 事件（或者你有触发该事件）消失，只需让它保存状态对象发生的任何事情。 这是一个粗略的例子来展示这个概念。假设您有一些类似菜单的东西，并使用 jquery show() 和 hide() 函数将其打开和关闭。

var state = {
     menu1: false
}

//A function you call whenever the menu button is clicked
function menuToggle() {
    if (state.menu1) {
        $('#menu1').hide()
    } else {
        $('#menu1').show()
    }
    //now update the state change
    state.menu1 = !state.menu1
}

现在假设您有一些函数，当您想将更改保存到本地存储时调用该函数

saveToLocalStorage() {
    for (item in state) {
        if (state.hasOwnProperty(item)) {
            //make sure only to save the state[item] if it is a string or can doesn't lose meaning if converted to a string
            localStorage.setItem(item, state[item])
        }
    }
}

该代码将遍历状态中的每个项目并将其保存到本地存储

加载页面后，您可以检查本地存储

loadFromLocalStorage() {
    var storedItem
    //loop through all of the properties in state
    for (item in state) {
        if (state.hasOwnProperty(item)) {
            storedItem = localStorage.getItem(item)
            if (storedItem !== null) {
                //the state now holds whatever was in local storage
                state[item] = storedItem
            }
        }
    }
}

再次抱歉，如果我没有将事情简化到足够的程度。您提出的问题要求您有某种方法来检查要保存到本地存储的所有内容，因此如果您将所有这些信息放在一个对象中，那么很容易将其全部保存，因为它已经在一个地方.