ページを更新するときにユーザーの選択を保存する

Question

私は現在、異なるチームのデータを表示するページを持っています。

ユーザーがクリックして「オン」または「オフ」状態にするためのデータがあり、それぞれ別のアイコンが表示されます。基本的にチェックリストに似ていますが、物理チェックボックスはありません。

ユーザーがページを更新したり、ブラウザを閉じて後で戻ったりしても、チェックボックスにチェックマークが付いていることを覚えておきたいと思います。

私はlocalStorageが良い選択だと聞いたことがありますが、私のような状況でどのように使用するかはわかりません。

現在、私はこのコードを持っている：

team1 = { 
    "information1": { 
     "name": "tom", 
     "age": "34" 
    }, 
    "information2": { 
     "name": "bob", 
     "age": "20" 
    }, 
}; 

team2 = { 
    "information1": { 
     "name": "betsy", 
     "age": "27" 
    }, 
    "information2": { 
     "name": "brian", 
     "age": "10" 
    }, 
}; 

$(document).ready(function() { 

    $("#displayObject1").on("click", function() { 
     switchData(team1); 
    }); 

    $("#displayObject2").on("click", function() { 
     switchData(team2); 
    }); 
    $("#table").on("click", ".on", function() { 
     $(this).removeClass("on"); 
     $(this).addClass("off"); 
    }); 
    $("#table").on("click", ".off", function() { 
     $(this).addClass("on"); 
     $(this).removeClass("off"); 
    }); 
}); 


function switchData(object) { 
    $("#table").contents("div").remove(); 
    if (!('rows' in object)) { 
     var rows = []; 
     Object.keys(object).forEach(function (key) { 
      if (key != 'rows') { 
       rows.push($('<div class="row on">' + object[key].name + '</div>')); 
      } 
     }); 
     object.rows = rows; 
    } 
    object.rows.forEach(function (row) { 
     $('#table').append(row); 
    }); 
} 

これは、行がチームを代表することができます。ユーザーがブラウザセッション中に別のチームを見ると、行は色の強調表示で保持されます。

これが私のHTMLです：

<div id="displayObject1"> 
    <span>Display object 1</span> 
</div> 
<div><hr></div> 
<div id="displayObject2"> 
    <span>Display object 2</span> 
</div> 
<div id="table"> 
</div> 

やアイテムが "オン" と "オフ" であるリスト表示するには、いくつかのCSS。

.on { 
    background-color: green; 
} 
.off { 
    background-color: red; 
} 

ページはどのように色の強調表示を覚えていますか？

Answer 1

local storageを使用してチームリスティングの状態をブラウザセッション間で維持するには、状態の論理表現を維持し、状態が変わるたびに文字列として保存する必要があります。

JSON.stringifyを使用すると、JavaScriptオブジェクトをJSON文字列でエンコードできます。ページの読み込み時にページの状態を取得するには

function savePageState() { 
    localStorage.setItem('pageState', JSON.stringify(pageState)); 
} 

、あなたはこのような何かを行うことができます：たとえば、あなたがpageStateという名前のグローバルオブジェクトを変更するときは、次のような関数を呼び出すことができます

pageState = JSON.parse(localStorage.getItem('pageState')); 
if (pageState === null) { 
    pageState = { 
    teams: teams 
    }; 
    savePageState(); 
} else { 
    teams = pageState.teams; 
} 

以前のセッションでpageStateが保存されなかった場合は、作成されてローカルストレージに保存されます。それ以外の場合は、チームリストの以前の表示を復元するために使用できるデータについてはpageStateに問い合わせます。

このコードサンプルは、グローバルオブジェクトteamsにページの状態に関連する情報が含まれていることを前提として動作します。ページステートオブジェクトにさらにプロパティを追加して、より多くの情報を格納することができます。例えば、現在表示されているチームを覚えておくことが、あなたができる：

pageState.showTeam = teamName; 

あなたは、おそらくこのように、ページの内容を初期化しているとき、あなたはpageState.showTeamに相談することができます

if (teamName == pageState.showTeam) { 
    showTeam(teamName); 
    $(label).addClass('selected'); 
} 

私が作りましたこのアプローチを示すページ。 localStorageをサンドボックス化されたので、私はスニペットとして私の答えでそれを含めることはできませんが、こちらのページにアクセスすることができます。

http://michaellaszlo.com/so/click-rows/

私は動的ページの初期化を可能にするために、あなたのチームのデータを再編成しました。各チームオブジェクトには、人物オブジェクトの配列が含まれています。

ユーザーは、チームメンバーの名前をクリックすると、CSSクラスselectedは、HTML要素にトグルされると、対応する人物オブジェクトがそのselectedプロパティトグルすることによって更新されますshowTeam機能は、人のチェック

function memberClick() { 
    $(this).toggleClass('selected'); 
    this.person.selected = (this.person.selected ? false : true); 
    savePageState(); 
}; 

をselectedプロパティを使用し、適切な場合はCSSクラスselectedを追加します。これは、最後のセッションからページの外観を復元できるようにするものです。

Answer 2

あなたが使用して、各オプションのためのlocalStorageにフラグを設定することができます

localStorage.setItem('item1',true) //set the value to the checkbox's value

をして使用してアクセス：

flagValue = localStorage.item1

文書がしたら、あなたのコード内でも同様にこれらの値を使用それに応じてチェックボックスの初期値を設定する準備が整う