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

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

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

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

声明一个存储对象storage

<script type="text/javascript" >
    var storage=window.localStorage;
</script>

存储数据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开发者->控制台->存储->本地存储）可以看到存储内容

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

利用localstorage在谷歌、火狐、360浏览器上进行数据本地缓存
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);
    })

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

<script type="text/javascript" >
    var storage=window.localStorage;
    var ex_grades_da=[];
    $(function () {
        var unit_id = $("#unit_id").children().attr("id");//找到对应的unit_id,之前存储的键名
        var ex_grades = storage.getItem(unit_id);//获取键名为unit_id的键值，即之前存储的数据
        var ex_grades_la = ex_grades.substring(1, ex_grades.length - 1);//根据需要截取字符串
        $("#grades_input").val(ex_grades_la);//显示在div上
        console.log(ex_grades_la);
    })
    $("#grades_submit").click(function () {
        var grades_input = document.getElementById("grades_input");
        var unit_id = $("#unit_id").children().attr("id");
        if (grades_input.value === "") {
            alert("最终分数不能为空，请重新填写！");
        } else if (grades_input.value < 0 || grades_input.value > 100) {
            alert("请正确填写分数数值(0~100)！");
            grades_input.value = "";
            grades_input.focus();
        } else if (isNaN(parseFloat(grades_input.value))) {
            alert("请正确填写分数数值(0~100)！");
            grades_input.value = "";
            grades_input.focus();
        } else if (grades_input.value >15) {
            alert("最多不能超过15分！");
            grades_input.value = "";
            grades_input.focus();
        } else {
            var ex_grades_val = grades_input.value;//获取到需要存储的数据
            var ex_grades = JSON.stringify(ex_grades_val);//把数据转化为JSON形式
            console.log(ex_grades);
            storage.setItem("unit_id", ex_grades);//这里的unit_id是一个变量，因为在实例中页面有不同的账号权限，所以unit_id会随之变化
            //如果只需存储一个数据，可根据需要只设定一个固定的键名，即storage.setItem("unit_id", ex_grades);
            var grades_inputl = [];
            grades_inputl.push($("#grades_input").val())
            var org_id = [];
            org_id.push($("#grades_submit").parent().attr("id"));
            $.ajax({
                url: "/makeScore/addExpertScore", //登录接口
                type: "post",
                data: {
                    "lead_score": grades_inputl,
                    "org_id": org_id,
                    "score_type": 2,
                    "account_id": account_id
                },
                dataType: "json",
                success: function (res) {
                    if (res.code !== 200) {

                        return false;
                    } else {
                        alert("提交成功")
                    }
                },
                error: function () {
                    alert("最终分数提交失败");
                    return false;
                }
            });
        }
    });
    $("#back_ex").click(function () {
        window.location.href = "expert_score.html";
    });
</script>