localStorage 的优势
- localStorage 拓展了 cookie 的 4K 限制。
- localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的。
判断浏览器是否支持 localStorage 这个属性:
if(! window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
//主逻辑业务
}
localStorage 的写入:
var storage=window.localStorage;
//方法1
storage["a"]=1;
//方法2
storage.b=1;
//方法3,这是推荐方法
storage.setItem("c",3);
localStorage
只支持 string 类型
localStorage 的读取:
//方法1
var a=storage.a;
//方法2
var b=storage["b"];
//方法3,这是推荐方法
var c=storage.getItem("c");
localStorage 的修改:
// 写入
storage.setItem("age",3);
console.log(storge.getItem("age"));
// 修改
storage.setItem("age",10);
console.log(storge.getItem("age"));
localStorage 的删除:
// 删除 window.localStorage 中所有内容
storage.clear();
// 删除某个键值对
storage.removeItem("age");
localStorage 查看:
// 查看 window.localStorage 中所有内容
storage;
localStorage 通过索引获取键:
// 通过索引过去键
storage.key(1);
localStorage 中使用JSON:
// 将 JSON对象 转成 string 类型,然后存储
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'Rye',
age:10,
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
// 将 JSON字符串 转换成为 JSON 对象输出
//
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);