20200810
localStorage的使用
首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性
if(！window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
//主逻辑业务
}
1.存值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem方法
// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";
2.取值也是如此，自身的方法是getItem
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;
3.改变的方式，就是相当于给对应的key重新赋值，就会把原来的值覆盖掉
// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";
4.移除某一个值，可以通过对象删除属性的关键字delete也可以用自身的方法removeItem
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name
5.获取所有的key
// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
console.log(localStorage.key(i));
}
// 通过for in 循环获取
for(var key in localStorage){
console.log(key);
}
6.获取所有的值
localStorage.valueOf();取出所有的值
7.清除所有的值
localStorage.clear()
8.判断是否具有某个key，hasOwnProperty方法
localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false
localStorage其他注意事项
一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
示例：
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
打印出来是Object对象
要注意的是，其他类型读取出来也要进行转换
使用技巧
1.先判断浏览器是否支持localStorage，通过if(!window.localStorage) return;
2.单词太长，不方便书写，可以利用 var storage=window.localStorage;
3.字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象
4.通过封装方法实现来回转化
