ブラウザのローカル/セッションストレージにルートスコープデータを格納し、ページリロード後にロード

Question

チーム1つのページアプリケーションを実装しました。アプリケーションの他のページにアクセスするためにいくつかのデータをルートスコープに格納しています。すべて正常に動作します。ブラウザの更新で問題が発生しました。アプリケーションページのユーザーがページを更新すると、ルートスコープからすべてのデータが失われます。私たちはリフレッシュすることを許さなかった。しかし、ユーザーに通知するためにカスタムメッセージを追加することは不可能であり、機能しないことが判明しました。さて、ページを更新するたびにユーザをログアウトするだけです。これはユーザにとっては厄介なことです。アプリケーションにもそれほどのセキュリティは必要ありません。そこで、我々は、ページをリフレッシュする際にローカルストレージにルートスコープデータ全体を追加することを考えています。そして、ページをリロードした後、再びローカル/セッションストレージデータからルートスコープにデータ全体をロードします。これを一箇所で行う必要があります。したがって、個々のモジュールページでこれを実装する必要はありません。 これを達成する方法はありますか？代替方法があれば誰でも提案してください。

Answer 1

HTML5ローカルストレージはブラウザによっては800kb〜10mbしかないことに注意してください。私はSafariが99のidkを持っていると聞いた。最新のGoogle Chrome（2/14/17）で5 MB。

とにかく、あなたはJSONを文字列化することにより、ローカルストレージを作成することができます

localStorage.setItem('myDataStorage', JSON.stringify(myData)); 

を次にそれらを取得

var myRetrievedData = JSON.parse(localStorage.getItem('myDataStorage')); 

myDataStorageは、あなたの作成したのlocalStorageの名前です。複数のローカルストアを作成するには、異なる名前を使用することができます。ただし、それぞれのサイズが限られていることに注意してください。 HTMLローカルストレージを使用してHD画像を保存することを期待しないでください

これで、myRetrievedData変数（または任意の変数名）を使用して、コードによって検索されたデータを操作できるようになりました。