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

Sorr如果我没有将事情简单化，那么再一次。你问的问题要求你有一些方法来检查你想保存到本地存储的所有东西，所以如果你把所有这些信息都放在一个对象中，那么很容易把它全部保存，因为它已经在一个地方。