本文要讲的localStorage和sessionStorage方法都是HTML5中的新方法,也可以完整写成window.localStorage或者window.sessionStorage用于客户端存储数据,两种方法的使用方法是一样的,唯一区别是在存储时效不同。
通过在浏览器上打印这两个方法,我们可以得到它们所有的方法和属性如下:
一:localStorage和sessionStorage特性
localStorage:持久性,没有时间限制的数据存储,代表它可以对数据一直存储着。
sessionStorage:针对一个session(会话)的数据存储,也就是说它可以一直存储数据直到我们将浏览窗口关闭销毁。
二:localStorage和sessionStorage方法
1.直接创建和访问
/*localStorage创建和访问*/
localStorage.id='1001';
localStorage.id //'1001'
/*sessionStorage创建和访问*/
sessionStorage.id='1001';
sessionStorage.id //'1001'
2.localStorage.length和sessionStorage.length(获取存储变量的个数)
localStorage.id='1001';
localStorage.length // 1
sessionStorage.id='1001';
sessionStorage.length // 1
3.valueOf(获取所有存储的数据)和key(读取第i个数据的名字或称为键值(从0开始计数))
/*访问所有存储的变量*/
localStorage.valueOf(); //localStorage存储的所有变量
sessionStorage.valueOf(); //sessionStorage存储的所有变量
/*访问固定index值存储的变量*/
localStorage.key(0); //localStorage存储的第一个变量的变量名和值
sessionStorage.key(0); //sessionStorage存储的第一个变量的变量名和值
4.setItem(存储数据)和getItem(读取固定变量名数据)
/*存储字符串或其他基本数据类型*/
localStorage.setItem('id','1001');
localStorage.getItem('id');) //'1001'
sessionStorage.setItem('id','1001');
sessionStorage.getItem('id')); //'1001'
/*localStorage存储JSON对象,sessionStorage同理*/
var obj = {
aaa: {
name: "aaa",
age: 10
},
bbb: {
name: "bbb",
age: 11
}
}
localStorage.setItem("newObj",JSON.stringify(obj));//将转为字符串的JSON变量存到localStorage里
console.log(JSON.parse(localStorage.getItem("newObj"))); //转回为JSON对象
==>return {aaa:{name: "aaa", age: 10},bbb:{name: "bbb", age: 11}}
5.removeItem(删除某个具体变量)和clear(清空存储的所有数据)
/*removeItem删除某个变量*/
localStorage.removeItem('id');
localStorage.id //undefined
sessionStorage.removeItem('id');
sessionStorage.id //undefined
/*clear清空所有变量*/
localStorage.clear(); //localStorage.length为0
sessionStorage.clear(); //sessionStorage.length为0
6.hasOwnProperty(检查是否保存某个变量),propertyIsEnumerable(用来检测属性是否属于某个对象的)和toLocaleString(将(数组)转为本地字符串)
/*hasOwnProperty方法*/
localStorage.hasOwnProperty('id') // true
sessionStorage.hasOwnProperty('id') // true
/*toLocaleString方法*/
localStorage.arr = [1,2,3]
localStorage.arr.toLocaleString(); //"1,2,3"
sessionStorage.arr = [1,2,3]
sessionStorage.arr.toLocaleString(); //"1,2,3"