localStorage 個人使用總結

本地儲存：

localStorage

存儲方式：

以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。

大小：

每個域名5M

localStorage的局限：

1、瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性

2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換

3、localStorage在瀏覽器的隱私模式下面是不可讀取的

4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

5、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

localStorage的優勢

1、localStorage拓展了cookie的4K限制

2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

localStorage的瀏覽器支持情況：

具體用法總結：

localStorage.setItem("key","value");//存儲變量名為key，值為value的變量
localStorage.key = "value"//存儲變量名為key，值為value的變量
localStorage.getItem("key");//獲取存儲的變量key的值www.it165.net  
localStorage.key;//獲取存儲的變量key的值 
localStorage.removeItem("key")//刪除變量名為key的存儲變量  
//以上即為localStorage調用的方法。下面介紹存儲JSON對象的方法。
  
var students =   
{  
    liyang:{name:"liyang",age:17},  
  
    lilei:{name:"lilei",age:18}  
  
}//要存儲的JSON對象  
  
 
students = JSON.stringify(students);//將JSON對象轉化成字符串  
localStorage.setItem("students",students);//用localStorage保存轉化好的的字符串  
//上面即可保存JSON對象，接下來我們在要使用的時候再將存儲好的students變量取回  
var students = localStorage.getItem("students");//取回students變量  
   
students = JSON.parse(students);//把字符串轉換成JSON對象  
   
//以上即可得到存儲的students的JSON對象了  

 這是我應用的小例子：
localStorage.res=res;
            var data1=res.data;//要存儲json對象
            data1 = JSON.stringify(data1);//將JSON對象轉化成字符串
            localStorage.setItem("data1",data1);//用localStorage保存轉化好的的字符串
            var data1 = localStorage.getItem("data1");//取回data1變量
            data1 = JSON.parse(data1);//把字符串轉換成JSON對象

 Google 控制台查看自己本地存儲的數據

 

   //獲取數據版本號
            $scope.dataVersion = function(){
                if(localStorage.getItem("versions") === null){
                    UserAndDepartmentSelectService.getDataVersion().$promise.then(function (res) {
                        if(res.status === 'success'){
                            if(!window.localStorage){
                                alert("瀏覽器支持localStorage");
                                return false;
                            }else{
                                // orgVersion
                                // userVersion
                                var versions = res.data; //要存儲json對象
                                versions = JSON.stringify(versions);//將JSON對象轉化成字符串
                                localStorage.setItem("versions",versions);//用localStorage保存轉化好的的字符串
                            }
                        }
                    })
                }
            };
            $scope.dataVersion();
            //獲取人員
            $scope.userList = function () {
                if (localStorage.getItem("userList") === null) {
                    UserAndDepartmentSelectService.getUsersTreeData().$promise.then(function (res) {
                        if (!window.localStorage) {
                            alert("瀏覽器支持localStorage");
                            return false;
                        } else {
                            // localStorage.userData=res.data;
                            var userList = res.data; //要存儲json對象
                            userList = JSON.stringify(userList);//將JSON對象轉化成字符串
                            localStorage.setItem("userList", userList);//用localStorage保存轉化好的的字符串
                        }
                    });
                }else{
                    UserAndDepartmentSelectService.getDataVersion().$promise.then(function (res) {
                        if(res.status === 'success'){
                            if(localStorage.getItem("versions") !== null){
                                var versions = localStorage.getItem("versions");//取回data變量
                                versions = JSON.parse(versions);//把字符串轉換成JSON對象
                                if(versions.userVersion !== res.data.userVersion){
                                    UserAndDepartmentSelectService.getUsersTreeData().$promise.then(function (res) {
                                        if (!window.localStorage) {
                                            alert("瀏覽器支持localStorage");
                                            return false;
                                        } else {
                                            // localStorage.userData=res.data;
                                            var userList = res.data; //要存儲json對象
                                            userList = JSON.stringify(userList);//將JSON對象轉化成字符串
                                            localStorage.setItem("userList", userList);//用localStorage保存轉化好的的字符串
                                        }
                                    });
                                }
                            }
                        }
                    })
                }
            };
            $scope.userList();

            //獲取部門
            $scope.departmentList = function () {
                if (localStorage.getItem("departmentList") === null) {
                    UserAndDepartmentSelectService.getDepartmentTreeData().$promise.then(function (res) {
                        if (!window.localStorage) {
                            alert("瀏覽器支持localStorage");
                            return false;
                        } else {
                            localStorage.departmentData = res.data;
                            var departmentList = res.data; //要存儲json對象
                            departmentList = JSON.stringify(departmentList);//將JSON對象轉化成字符串
                            localStorage.setItem("departmentList", departmentList);//用localStorage保存轉化好的的字符串
                        }
                    });
                }else{
                    UserAndDepartmentSelectService.getDataVersion().$promise.then(function (res) {
                        if(res.status === 'success'){
                            if(localStorage.getItem("versions") !== null){
                                var versions = localStorage.getItem("versions");//取回data變量
                                versions = JSON.parse(versions);//把字符串轉換成JSON對象
                                if(versions.orgVersion !== res.data.orgVersion){
                                    UserAndDepartmentSelectService.getDepartmentTreeData().$promise.then(function (res) {
                                        if (!window.localStorage) {
                                            alert("瀏覽器支持localStorage");
                                            return false;
                                        } else {
                                            // localStorage.userData=res.data;
                                            var departmentList = res.data; //要存儲json對象
                                            departmentList = JSON.stringify(departmentList);//將JSON對象轉化成字符串
                                            localStorage.setItem("departmentList", departmentList);//用localStorage保存轉化好的的字符串
                                        }
                                    });
                                }
                            }
                        }
                    })
                }
            };
            $scope.departmentList();