ボタンをローカルストレージに加えた変更を保存するにはどうすればよいですか？

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' 

すでにそれは難しいかもしれ：あなたは、おそらくこのような独自のローカルストレージの項目は、それらの内部の各項目を与えることになるでしょうあなたは

それらのもののすべてを保持したり、あなたのWebページに複数のコンポーネントを持っている場合は、ローカルストレージを変換する各コンポーネント

の状態を持つことができれば、それはそれが簡単にローカルストレージに新しいものを追加することになりますアイテムを状態に戻す：

for (item in state) { 
    if (state.hasOwnProperty(item){ 
     state.item = localStorage.getItem(item) 
    } 

ローカルストレージに状態を保存するときは、いつでもすべての状態を持っているので簡単です ウェブページ上の何かに変更が加えられたときはいつでも状態の更新を行うことができます。ユーザーが保存しようとしている場合のみ重要です。ボタンをクリックするとすぐにすべての状態を更新し、すぐにローカルストレージに保存することができます。

これはほんとうに役立ちますあなたが探していた方法

編集：

ごめんなさい国家のことはとても混乱していたので、私が何を意味しているか説明することはおそらく貧弱でした。そのため、ボタンをローカルストレージに保存して変更を保存したい場合があります。あなたが他の人の回答から得たトグルのアイデアは、「オン」または「オフ」の位置にしかないのでメニューが開いたり閉じたりしている場合に便利ですが、テキストを保存したいハイライトされている場合は、確かにそれ以上の情報を保存する必要があります。

あなたはメニューやテキスト要素のような要素をすべて持っていると言いました。 1つのオブジェクトを持つことができます（名前は何でも構いません）。今はそれを状態と呼んでみましょう。

ので

var state = {} 

オブジェクトを使用すると、様々な要素のために異なる状態のすべてを保存することができ、単一の場所であること。メニューが開いているか閉じているかを簡単に確認できます。

メニューをトグル（またはイベントをトリガーしている）しているjqueryイベントが消えた場合は、状態オブジェクトに何が起こったかを保存してください。 ここにその概念を示す大まかな例があります。何かメニューがあり、jquery show()とhide()関数を使用して開いたり閉じたりすることができます。さて、あなたはコードが状態ですべての項目を介して実行し、ローカルストレージ

に保存するローカルストレージに変更

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

を保存するたびに呼び出され、いくつかの機能を持っているとしましょう

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 
} 

あなたは、ローカルストレージ

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を確認することができますページをロードする際に

私が事を十分に簡素化しなかったならば、もう一度。あなたが尋ねた質問では、ローカルストレージに保存するすべてのものをチェックする何らかの方法が必要なので、すべての情報を1つのオブジェクトに入れておくと、すでに1つの場所にあるので、すべて保存することは簡単です。