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

Question

An answer至 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)
    }

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

我希望这对一些人有所帮助，如果这不是您正在寻找的方法，我们深表歉意

编辑:

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

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

所以

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

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