LocalStorage用法在Web编程中,经常需要在页面间存储数据,通常使用的是cookie,在HTML5中,可以使用LocalStorage进行存储。localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中。下面简单介绍下LocalStorage的用法

LocalStorage用法

一、什么是LocalStorage

1、在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

2、localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage 

二、LocalStorage优缺点

LocalStorage优点

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

2、不会随http请求一起发送

3、localstorage用于持久化的本地存储,除非主动删除数据,否则数据是没有时间限制

LocalStorage缺点

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

5、localStorage不能被爬虫抓取到

三、LocalStorage常用的方法

名称 作用
clear 清空localStorage上存储的数据
getItem 读取数据
hasOwnProperty 检查localStorage上是否保存了变量x,需要传入x
key 读取第i个数据的名字或称为键值(从0开始计数)
length localStorage存储变量的个数
propertyIsEnumerable 用来检测属性是否属于某个对象的
removeItem 删除某个具体变量
setItem 存储数据
toLocaleString 将(数组)转为本地字符串
valueOf 获取所有存储的数据

四、在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性

  •  
  • 
    if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                //主逻辑业务
            }
    
    		
  • 五、LocalStorage使用实例

    1、localStorage的写入

  •  
  • 
    if(!window.localStorage){
                alert("浏览器支持localstorage");
                return false;
            }else{
                var storage=window.localStorage;
                //写入a字段,方式一
                storage["a"]=1;
                //写入b字段,方式二
                storage.a=1;
                //写入c字段,方式三
                storage.setItem("c",3);
                console.log(typeof storage["a"]);
                console.log(typeof storage["b"]);
                console.log(typeof storage["c"]);
            }
    
    		
  • 2、localStorage的读取

  •  
  • 
    if(!window.localStorage){
                alert("浏览器支持localstorage");
            }else{
                var storage=window.localStorage;
                //写入a字段
                storage["a"]=1;
                //写入b字段
                storage.a=1;
                //写入c字段
                storage.setItem("c",3);
                console.log(typeof storage["a"]);
                console.log(typeof storage["b"]);
                console.log(typeof storage["c"]);
                //第一种方法读取
                var a=storage.a;
                console.log(a);
                //第二种方法读取
                var b=storage["b"];
                console.log(b);
                //第三种方法读取
                var c=storage.getItem("c");
                console.log(c);
            }
    
    		
  •  
  •  
  •  
  • 
    localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
    localStorage.name // "caibin"
    localStorage.valueOf() //读取存储在localStorage上的所有数据
    localStorage.key(0) // 读取第一条数据的变量名(键值)
    //遍历并输出localStorage里存储的名字和值
    for(var i=0; i<localStorage.length;i++){
        console.log('localStorage里存储的第'+i+'条数据的名字为:'+localStorage.key(i)+',值为:'+localStorage.getItem(localStorage.key(i)));
    }
    
    				
  • 3、localStorage的修改

  •  
  • 
    if(!window.localStorage){
                alert("浏览器支持localstorage");
            }else{
                var storage=window.localStorage;
                //写入a字段
                storage["a"]=1;
                //写入b字段
                storage.b=1;
                //写入c字段
                storage.setItem("c",3);
                console.log(storage.a);
           
                /*修改localStorage*/
                storage.a=4;
                console.log(storage.a);
            }
    
    		
  • 4、检查localStorage里是否保存某个变量

  •  
  • 
    localStorage.hasOwnProperty('name') // true
    localStorage.hasOwnProperty('age')  // false
    
    		
  • 5、清空localStorage

  •  
  • 
    var storage=window.localStorage;
    storage.a=1;
    storage.setItem("c",3);
    console.log(storage);
    
    storage.clear();//清空localStorage
    console.log(storage);
    
    		
  • 6、删除某个变量

  •  
  • 
    var storage=window.localStorage;
    storage.a=1;
    storage.setItem("c",3);
    console.log(storage);
    
    storage.removeItem("a");//删除
    console.log(storage.a);
    
    		
  • 7、将数组转为本地字符串

  •  
  • 
    var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
    localStorage.arr = arr //["aa","bb","cc"]
    localStorage.arr.toLocaleString(); // "aa,bb,cc"
    
    		
  • 8、将JSON存储到localStorage里

  •  
  • 
    var students = {
        xiaomin: {
            name: "xiaoming",
            grade: 1
        },
        teemo: {
            name: "teemo",
            grade: 3
        }
    }
    
    students = JSON.stringify(students);  //将JSON转为字符串存到变量里
    console.log(students);
    localStorage.setItem("students",students);//将变量存到localStorage里
    
    var newStudents = localStorage.getItem("students");
    newStudents = JSON.parse(students); //转为JSON
    console.log(newStudents); // 打印出原先对象
    
    		
  • 标签: