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惟一的优势就是语法简单，可是性能并非很好，能不用的时候尽可能不用。