html5之localstorage本地存储

责编:menVScode 2017-12-12 14:41 阅读(485)

        HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。

if(window.localStorage){
    alert('支持localStorage');
}else{
    alert('不支持localStorage');
}

        localStorage一些常用的API如下表所示

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

        清空localStorage

localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

        存储数据

localStorage.setItem("name","menvscode.com") //存储名字为name值为menvscode.com的变量
localStorage.name = "menvscode.com"; // 等价于上面的命令 localStorage // Storage {name: "menvscode.com", length: 1}

        读取数据

localStorage.getItem("name") //menvscode.com,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "menvscode.com"
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))); }

        删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

        检查localStorage里是否保存某个变量

// 这些数据都是测试的
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

        将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

        将JSON存储到localStorage里

var students = {
    one: {
        name: "sisi",
        grade: 1
    },
    two: {
        name: "meimei",
        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); // 打印出原先对象
标签: localstorage html5
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码