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 控制台查看自己本地存储的数据

localStorage 个人使用总结

   //获取数据版本号
            $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();

localStorage 个人使用总结

相关推荐