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

Question

An answer to this question使将特定对象上的切换类保存到本地存储成为可能，这很有帮助，但并不完全符合我的需要。在没有太多解释性注释的情况下，我并不擅长修改代码。

这是答复者的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)
    }

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

我希望这会对你有所帮助，如果这不是你想要的方法，很抱歉

编辑：

抱歉，状态的概念如此令人困惑，我可能没有很好地解释我的意思。因此，您希望让按钮通过将所做的任何更改保存到本地存储来保存这些更改。你从其他人的回答中得到的切换想法对于菜单是打开还是关闭这样的事情很有用，因为它只能处于“开”或“关”的位置，但如果你想保存文本和突出显示的文本，那么你肯定需要保存更多的信息。

你说你有所有这些元素，比如菜单和文本元素。你可以只有一个对象(你想怎么命名它都行)。让我们暂时将其称为state。

所以

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
            }
        }
    }
}

如果我没有把事情简单化，我再次道歉。您提出的问题要求您有某种方法来检查您希望保存到本地存储的所有内容，因此如果您将所有这些信息放在一个对象中，那么很容易保存所有这些信息，因为它已经在一个位置。