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

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

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

1 个答案: