利用localstorage在谷歌、火狐、360浏览器上进行数据本地缓存

趁着放假整理下之前做的实训项目里解决的一些问题，这篇是关于利用localstorage对本地数据缓存的解决办法。

首先介绍下localstorage：用来作为本地存储，相对于cookie（4k）来说可以储存更多的数据（5m），不用连接服务器，会一直保存在浏览器的本地缓存里，目前亲身实现成功的浏览器有谷歌、火狐、360、qq（估计普遍适用于Webkit和IE内核的浏览器）

localstorage利用键值对的形式进行储存，因此我们在存储和加载页面获取数据的时候都需要（键名，键值）两个参数。以下的以我的项目实例做过程讲解。

1. 声明一个存储对象storage

2. 存储数据storage.setItem（键名，键值）

//获取到需要存储的数据
 var ex_grades_val = grades_input.value;
 //把数据转化为JSON形式
 var ex_grades = JSON.stringify(ex_grades_val);
 //这里的unit_id是一个变量，因为在实例中页面有不同的账号权限，所以unit_id会随之变化
 storage.setItem(unit_id, ex_grades);
//如果只需存储一个数据，可根据需要只设定一个固定的键名
//即storage.setItem("unit_id", ex_grades);

在火狐开发者选项中（打开菜单->web开发者->控制台->存储->本地存储）可以看到存储内容

3. 在加载网页是获取数据storage.getItem（键名，键值），显示在页面上

$(function () {
//找到对应的unit_id,之前存储的键名
 var unit_id = $("#unit_id").children().attr("id");
 //获取键名为unit_id的键值，即之前存储的数据
 var ex_grades = storage.getItem(unit_id);
 //根据需要截取字符串
 var ex_grades_la = ex_grades.substring(1, ex_grades.length - 1);
 //显示在div上
  $("#grades_input").val(ex_grades_la);
    })

4. 关闭网页重新打开能显示之前保留的数据
   
5. js完整代码