Geekly Articles each Day

ローカルストレージをオブジェクトとして使用する-続き

この投稿では、オブジェクトと同様に、リポジトリを操作するための適切な方法を修正し、提供したいと思います。 「 オブジェクトと同様に、ローカルストレージで作業しますか？」という投稿のコード 簡単！ 「使用しないことを強くお勧めします。すべてが悪いです（マイナスの概要は以下のとおりです）。 これの目的は、 このコードを決して使用しないようにお気に入りを参照するか、プラス記号をつけることによって記事を追加したすべての人に説明することです 。

ここで、 コメントで 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を変更することもできますが、これはお勧めしません。プライベートプロパティなどの杖を入れることもできます:)）

この記事の冒頭のリンクによるソリューションと比較した長所：


一般的な短所：


いいね

Source: https://habr.com/ru/post/J144998/

More articles:


All Articles