ローカルストレージでの作業、オブジェクトでの使用方法 簡単！

localStorageが登場したとき、私はゾウとしてうれしかったのですが、少し後に、問題の詳細な調査を終えた後、私は少しがっかりしました。 保存するためにそれらを文字列に変換する必要があり、それを操作するために文字列をオブジェクトに戻してから、保存するために再び文字列に変換する必要がありました。 リポジトリをできるだけ簡単に操作できるようにする素晴らしいライブラリがあるとは言いませんが、どういうわけか関数を呼び出したくありませんでした。

localStorage = { a: { b: 1 }, c: { d: 2 } } localStorage.ab = 3;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

かっこいいですね。



比較的遠い昔、約6か月前のどこかで、私は、まったく機能せずにlocalStorageを純粋にオブジェクトのように操作できるようにする方法を考えました。 チャレンジを受け入れました！



悪名高いゲシャが言うように：「 それだけです、私はそれを作りました 。」



これ以上読む必要はありません。 より合理的なソリューションはこちらです： habrahabr.ru/post/144998





主なサブタスクは、セッターをオブジェクト自体だけでなくサブオブジェクトにも掛ける方法の発明であり、キーは事前にわかりません。 これは非常に簡単に解決されます：オブジェクトにゲッターを置きます：

 Object.defineProperty( window, 'objectLocalStorage', { //  -  get: function() { return {}; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

キーの1つに何かを割り当てているので、

 window.objectLocalStorage.a = 1;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ゲッターが呼び出されます。



したがって、すべてがとてつもなく単純です。

 (function() { // ,    ,      //       json    var _objectLocalStorage = JSON.parse( localStorage.getItem( 'objectStorage' ) ) || {}, timer = null; //     objectLocalStorage  window       //   ,    localStorage,   ,   Object.defineProperty( window, 'objectLocalStorage', { get: function() { // timer   ,         //   ,    localStorage    , //     // setTimeout    >< ,    if( timer === null ) { timer = setTimeout( function(){ var stringified = JSON.stringify( _objectLocalStorage ); //   :      , //     ,    if( stringified !== localStorage.getItem( 'objectStorage' ) ) { //  localStorage.setItem( 'objectStorage', stringified ); } timer = null; }, 0); } return _objectLocalStorage; }, //  ,  objectLocalStorage    set: function( v ) { _objectLocalStorage = v; localStorage.setItem( 'objectStorage', JSON.stringify( _objectLocalStorage ) ); } } ); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（タイマーは、結果をlocalStorageに保存するためにのみ呼び出されることに注意してください。そうでない場合、_objectLocalStorageはすぐに戻るため、割り当て結果は予測可能です。 このコメントに触発されました。）

使い方は？

上記のコードをjsファイルに貼り付けて使用します：

 objectLocalStorage = { a: 4, b: {c: 2} }; objectLocalStorage.bc = {d: 5}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページをリロードし、

 console.log( objectLocalStorage ); // { a: 4, b: {c: {d: 5}} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どのように機能しますか？

getL objectLocalStorageを使用すると、ローカルの_objectLocalStorageオブジェクトが返されます。 したがって、objectLocalStorageのサブオブジェクトキーの1つに何かを割り当てると、_objectLocalStorageが返され、割り当てが行われます。 それは

 objectLocalStorage.ab = 5;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様に

 _objectLocalStorage.ab = 5;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、最初の場合、割り当て後、オブジェクトはlocalStorageに保存されます。 この部分をタイムアウトにしないと、ストレージは割り当てまで残ります。 私は同意しますが、この方法にはバグがたくさんありますが、後に保存する別の方法を見つけることができませんでした。



実際、それがすべてです。 理想的には、もちろん、次のものがあればよいでしょう。

• IE <9をサポートします。ご存知のように、Object.definePropertyはクロスブラウザではありません
  
  
• すべての子オブジェクトにゲッターを掛ける、つまり、今：
  
  

   objectLocalStorage.ab = 5; //  a = objectLocalStorage.a; ab = 5; //  
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
• sessionStorageについても同じことを行います
  
  

しかし、その後、私は喜びを共有したかっただけです:)



あなたにレイズビーバー。



UPD

コメントで Scalar が表明した代替のシンプルで独創的なソリューションを個別に強調したいと思います 。

LSでシリアル化され（タイムアウトとonbeforeunloadを使用）、アプリケーションの起動時に非シリアル化される通常のオブジェクトの読み取りと書き込みが簡単に思えます。