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如果我沒有將事情簡單化，那麼再一次。你問的問題要求你有一些方法來檢查你想保存到本地存儲的所有東西，所以如果你把所有這些信息都放在一個對象中，那麼很容易把它全部保存，因爲它已經在一個地方。