JavaScript 使用 window.localStorage 在客户端存储数据

localStorage 的优势

1. localStorage 拓展了 cookie 的 4K 限制。
2. 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);