HTML5 localStorage 的使用

 

 

        在前端開發中，咱們會常遇到要在兩個甚至多個html之間通訊，咱們能夠在url中添加參數，可是當要傳遞的數據量較大較多時呢，不妨試試html5 的localStorage吧。 

      

       1) 檢測你的瀏覽器是否支持localStorage：

            if(window.localStorage){

                   alert（'YES！'）；

           } else alert('NO！');

 

       2) 數據都是以鍵值對的形式存儲在localStorage中的，使用時直接在window.localStorage中添加一個屬性就能夠了，定義和修改的示例以下：

            //在window.localStorage添加一個test屬性，並賦值test1的三種實現方式

              localStorage.test = 「test1」；

              localStorage[「test」] = 「test1」；    

              localStorage.setItem(「test」,」test1」);

 

             //屬性值得修改同其的定義方式同樣

 

            //屬性值的獲取

            var test = localStorage.test;

            var test = localStorage[「test」];

            var test = localStorage.getItem(「test」);

 

           //屬性的刪除

           localStorage.removeItem(「test」);//清除屬性test

           localStorage.clear();//清除全部的屬性

      

       3） localStorage提供的key()和length能夠方便的實現全部屬性的數據遍歷，例：

           var storage = window.localStorage;

           var key = 「」;

           for(var i = 0;I < storage.length;i++){

               key = storage.key(i);

               console.log(key + 「 : 」 + localStorage.getItem(key));

          }

 

    4）localStorage僅能存儲這種key/value鍵值對形式的數據，若是咱們要存儲的數據量比較大那，能夠試試把這些數據轉化爲json數據，做爲value值存儲進去。如：

         //set the infomation

           var json = {「name」:」echo」,」message」:」hello localStorage」,」id」:1};

           localStorage.setItem(「info」,json);

   

        //get the information

          var info = localStorage.getItem(「info」);

          info = eval(「(」 + info + 」)」);

          console.log(「name:」+info.name+」 message:」+info.message);

 

    5）若是你用html5 的canvas作開發，你能夠把這個canvas的內容生成一個快照在另外一個html中顯示，如：

          //普通canvas實現

            var canvas = document.getElementById(「canvas」);

            var url = canvas.toDataURL(「image/png」);

            localStorage.setItem(「image」,url);

 

         //若是你用webgl作3D開發，可這麼實現

            var url = renderer.domElement.toDataURL('image/png','name');

            localStorage.setItem("image",url);

   

 

    6）最後，localstorage惟一的優勢就是語法簡單，可是性能並非很好，能不用的時候儘可能不用。