ここで、 コメントで Scalarが提案した最も単純なアイデアを示したいと思います。
ページが読み込まれると（DOMツリー準備イベントの前でも）、リポジトリ（この場合はlocalStorageとsessionStorage）に移動し、JSONを取得し、デシリアライズして変数に入れます。
localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2}
次に、Nミリ秒ごとに逆プロセスが生成されます。
localStorage.setItem( '_myStorage', JSON.stringify( localObject ) );
onbeforeunloadイベントで、同じことを行います。
アイデアの実装は簡単です（タスクの難易度は低く、初心者でもアクセスできます）。 しかし、（私を含めて）誰もがこれを前に考えたわけではありません。
ObjectStorageコンストラクターコード
var ObjectStorage = function ObjectStorage( name, duration ) { var self, name = name || '_objectStorage', defaultDuration = 5000; // , , // , // duration ( ) if ( ObjectStorage.instances[ name ] ) { self = ObjectStorage.instances[ name ]; self.duration = duration || self.duration; } else { self = this; self._name = name; self.duration = duration || defaultDuration; self._init(); ObjectStorage.instances[ name ] = self; } return self; }; ObjectStorage.instances = {}; ObjectStorage.prototype = { // type == local || session _save: function ( type ) { var stringified = JSON.stringify( this[ type ] ), storage = window[ type + 'Storage' ]; if ( storage.getItem( this._name ) !== stringified ) { storage.setItem( this._name, stringified ); } }, _get: function ( type ) { this[ type ] = JSON.parse( window[ type + 'Storage' ].getItem( this._name ) ) || {}; }, _init: function () { var self = this; self._get( 'local' ); self._get( 'session' ); ( function callee() { self.timeoutId = setTimeout( function () { self._save( 'local' ); callee(); }, self._duration ); })(); window.addEventListener( 'beforeunload', function () { self._save( 'local' ); self._save( 'session' ); }); }, // , (clearTimeout( storage.timeoutId )) timeoutId: null, local: {}, session: {} };
使用法：
var storage = new ObjectStorage; storage.local = {a:4, b: {c:5}}; storage.session = {a:7, b: {c:8}}; b = storage.local.b; bc = {d:6};
ページをリロードする
var storage = new ObjectStorage; console.log( storage ); /* { _name: ..., duration: ..., local: {a:4, b: {c: {d: 6}}}, session: {a:7, b: {c :8}} } */
あるいは、ObjectStorageコンストラクターを呼び出すときに、2つの引数を渡すことができます。name-リポジトリ内のキーの名前とduration-localStorageのデータストレージの間隔。
new ObjectStorage( '_myStorage', 1000 );
名前を標準のままにすることができます：
new ObjectStorage( null, 1000 );
または、初期化後に期間を変更できます。
var storage = new ObjectStorage; storage.duration = 2000;
（storage._nameを変更することもできますが、これはお勧めしません。プライベートプロパティなどの杖を入れることもできます:)）
この記事の冒頭のリンクによるソリューションと比較した長所：
- パフォーマンス：ゲッターはありません。キーを呼び出すたびにリポジトリをプルする必要はありません。
- コンパクト。
- 通常のオブジェクトと同様に作業できます。
storage.local = {a:{}} storage.local.ab = 5; // a = storage.local.a; ab = 5; //
- sessionStorageの組み込みソリューション。
一般的な短所：
- ブラウザが正しく閉じない場合（BSOD、停電など）、失われる可能性があります（ああ神々！）最後のM秒で作業します（デフォルトでは5）。 この瞬間が重要なシナリオを考え出そうとしても、私はできませんでした。
いいね