web页面缓存技术之Local Storage

业务：检测页面文本框的值是否有改变，有的话存入缓存，并存储到数据库，这样用户异常操作后再用浏览器打开网页，就可避免重新填写数据

数据库表：Test，包含字段：PageName，PageValue

BLL层代码：

        #region 获取缓存
        /// <summary>
        /// 获取缓存
        /// </summary>
        /// <param name="pageName">页面名称</param>
        /// <returns></returns>
        public string GetCache(string pageName)
        {            
            if (string.IsNullOrEmpty(pageName)) throw new Exception("pageName is null");
            string selectPageValue_sql = "select PageValue from Test where PageName=@PageName";
            DataRowCollection rows = SqlHelper.ExecuteTable(selectPageValue_sql, new SqlParameter("@PageName", pageName)).Rows;
            if (rows.Count == 0) return string.Empty;
            return rows[0][0].ToString();
        } 
        #endregion
        
        #region 添加/修改页面缓存

        /// <summary>
        /// 添加/修改页面缓存
        /// </summary>        
        /// <param name="pageName">页面名称</param>
        /// <param name="pageValue">页面值</param>        
        public void TestAE(string pageName, string pageValue)
        {
            if (string.IsNullOrEmpty(pageName)) throw new Exception("pageName is null");
            if (string.IsNullOrEmpty(pageValue)) throw new Exception("pageValue is null");
            string selectTest_sql = "select count(1) from Test where PageName=@PageName";
            bool isHasThisPageName = (Int32)SqlHelper.ExecuteScalar(selectTest_sql, new SqlParameter("@PageName", pageName)) == 1;
            if (isHasThisPageName)//修改
            {
                string updateTest_sql = "update Test set PageValue=@PageValue where PageName=@PageName";
                SqlHelper.ExecuteNonQuery(updateTest_sql,
                    new SqlParameter("@PageValue", pageValue),
                    new SqlParameter("@PageName", pageName));
            }
            else//添加
            {
                string addTest_sql = "insert into Test (PageName,PageValue) values (@PageName,@PageValue)";
                SqlHelper.ExecuteNonQuery(addTest_sql,
                    new SqlParameter("@PageName", pageName),
                    new SqlParameter("@PageValue", pageValue));
            }
        }

        #endregion

Controller代码：

        /// <summary>
        /// 实例化页面缓存业务逻辑
        /// </summary>
        public static BLL.BLL_Test b_BLL_Test = new BLL.BLL_Test();
        /// <summary>
        /// 本地缓存结合网络缓存
        /// </summary>
        /// <returns></returns>
        public ActionResult LocalCache()
        {
            return View();
        }
     /// <summary>
     /// 获取页面缓存
     /// </summary>
     /// <returns></returns>
     public JsonResult GetPageCache()
     {
       try
       {
           string pageName = Request["PageName"].ToLower();
          return Json(b_BLL_Test.GetCache(pageName),"json");
       }
       catch (Exception ex)
       {
          return Json("错误：" + ex.Message);
       }
     }
        /// <summary>
        /// 创建/更新页面缓存
        /// </summary>
        /// <returns></returns>
        public ActionResult SetPageCache()
        {
            try
            {
                string pageName = Request["PageName"].ToLower();
                string pageValue = Request["PageValue"];
                b_BLL_Test.TestAE(pageName, pageValue);
                return Content(string.Empty);
            }
            catch (Exception ex)
            {
                return Content("错误：" + ex.Message);
            }
        }

localstoragehelper.js：

function CheckIsSupport_LocalStorage() {
    if (!window.localStorage) {
        alert("当前浏览器暂不支持Local Storage");
        return false;
    }
    return true;
}
function GetAlong_LocalStorage(key) {
    if (!CheckIsSupport_LocalStorage()) return;
    return window.localStorage.getItem(key);
}
function GetList_LocalStorage() {
    if (!CheckIsSupport_LocalStorage()) return;
    var storage = window.localStorage,
        list = [];
    for (var i = 0; i < storage.length; i++)
        list.push("{0}~{1}".format(storage.key(i), storage.getItem(storage.key(i))));
    return list;
}
function CreateOrSet_LocalStorage(key, value) {
    if (!CheckIsSupport_LocalStorage()) return;
    var storage = window.localStorage;
    if (storage.getItem(key)) storage.removeItem(key);
    storage.setItem(key, value);
}
function Remove_LocalStorage(key) {
    if (!CheckIsSupport_LocalStorage()) return;
    window.localStorage.removeItem(key);
}

localcache.js：

var pageName = window.location.pathname.toLowerCase(),        //页面缓存名称
           pageDateName = "{0}_date".format(pageName),        //页面缓存创建时间名称
           pageCache = GetAlong_LocalStorage(pageName),       //页面本地缓存数据
           cache_date = GetAlong_LocalStorage(pageDateName);  //页面本地缓存的创建时间
$(function () {
    //兼容性检测
    if (!window.localStorage) {
        alert("当前浏览器不支持Local Storage本地存储");
        return;
    }

    if (!CheckStringIsNull(pageCache)) {//页面本地缓存存在
        if (!CheckStringIsNull(cache_date)) {//存在页面本地缓存的创建时间
            if (ComputeDateMin(cache_date) >= 10) {//页面本地缓存创建时间超过10分钟
                GetPageNetCacheAndSet(pageName);
            } else {//页面本地缓存创建时间未10分钟
                GetPageLocalCache(pageCache);
            }
        } else {//页面本地缓存创建时间不存在
            GetPageNetCacheAndSet(pageName);
        }
    } else {//页面本地缓存不存在
        GetPageNetCacheAndSet(pageName);
    }

    //文本框只要一改变存入缓存(存入本地和网络)
    $("input[type=text]").on("change", function () {
        var pageValue = [];
        $("input[type=text]").each(function (index, item) {
            var id = $(item).attr("id"),
                val = CheckStringIsNull($(item).val()) ? "" : $(item).val();            
            pageValue[index] = { "InputID": id, "InputValue": val };
        });
        if (CheckStringIsNull(pageValue)) return;
        //先更新本地缓存,无论网络缓存是否更新成功
        CreateOrSet_LocalStorage(pageName, JSON.stringify(pageValue));
        CreateOrSet_LocalStorage(pageDateName, new Date().getTime());
        $.post("/Home/SetPageCache", { PageName: pageName, PageValue: JSON.stringify(pageValue) }, function (json) {
            if (!CheckStringIsNull(json)) {//更新时出错
                alert(json);
                return;
            }
        }, "text");
    });

});

//检测字符串是否为空
function CheckStringIsNull(str) {
    return (str == "" || str == null || typeof (str) == undefined);
}
//计算相差分钟数
function ComputeDateMin(date) {
    var minutes = Math.floor((((new Date().getTime() - date) % (24 * 3600 * 1000)) % (3600 * 1000)) / (60 * 1000));
}

//获取页面网络缓存并将缓存数据赋值到页面,同时更新页面缓存创建时间
function GetPageNetCacheAndSet() {
    $.post("/Home/GetPageCache", { PageName: pageName }, function (json) {
        if (json.indexOf("错误") == -1) {
            if (!CheckStringIsNull(json)) {
                var cache_list = eval('(' + json + ')');
                $(cache_list).each(function (index, item) {                 
                    $("#{0}".format(cache_list[index].InputID))
                        .val(cache_list[index].InputValue);
                });
                CreateOrSet_LocalStorage(pageName, json);
                CreateOrSet_LocalStorage(pageDateName, new Date().getTime());//更新缓存创建时间
            }
        } else {//获取网络缓存时出错
            alert(json);
        }
    }, "json");
}

//获取页面本地缓存并将缓存数据赋值到页面,同时更新页面缓存创建时间
function GetPageLocalCache(pageCache) {
    if (CheckStringIsNull(pageCache)) {//本地为空,此处为多余判断
        GetPageNetCacheAndSet();
    }
    var cache_list = eval('(' + pageCache + ')');
    $(cache_list).each(function (index, item) {        
        $("#{0}".format(cache_list[index].InputID))
            .val(cache_list[index].InputValue);
    });
    CreateOrSet_LocalStorage(pageDateName, new Date().getTime());//更新缓存创建时间
}

页面(mvc4)代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>LocalCache</title>
    <script src="~/Content/js/comm/jquery.js"></script>
    <script src="~/Content/js/comm/comm.js?@DateTime.Now.Millisecond"></script>
    <script src="~/Content/js/comm/localstoragehelper.js?@DateTime.Now.Millisecond"></script>
    <script src="~/Content/js/home/localcache.js?@DateTime.Now.Millisecond"></script>
</head>
<body>
    <!-- http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html -->    
    <input id="key1" type="text" placeholder="enter key name..." />
    <input id="key2" type="text" placeholder="enter key name..." />
    <input id="key3" type="text" placeholder="enter key name..." />
    <input id="key4" type="text" placeholder="enter key name..." />
    <input id="key5" type="text" placeholder="enter key name..." />
    <input id="key6" type="text" placeholder="enter key name..." />
    <input id="key7" type="text" placeholder="enter key name..." />
    <div>
        @*<br /><br />
            <!-- list -->
            <input id="list" type="button" value="get list" autofocus /><br /><br />

            <!-- create or set -->
            <input id="key" type="text" placeholder="enter key name..." />
            <input id="value" type="text" placeholder="enter key value..." />
            <input id="createorset" type="button" value="create or set" /><br /><br />

            <!-- remove -->
            <input id="removekey" type="text" placeholder="enter will to remove key name..." />
            <input id="remove" type="button" value="remove" />*@
        @*<script>
                $(function () {
                    $("input[type=button]").on("click", function () {
                        var id = $(this).attr("id");
                        switch (id) {
                            case "list":
                                var list = GetList_LocalStorage(),
                                    $con = $("#content");
                                if (list == "" || list == null || typeof (list) == undefined) {
                                    $con.text("has no local storage.");
                                    return;
                                }
                                $con.empty().append("Local storage List:<br/>");
                                for (var i = 0; i < list.length; i++) {
                                    $con.append("key:{0}  value:{1}<hr/>"
                                        .format(list[i].split("~")[0], list[i].split("~")[1]));
                                }
                                break;
                            case "createorset":
                                CreateOrSet_LocalStorage($("#key").val(), $("#value").val());
                                $("#list").click();
                                break;
                            case "remove":
                                Remove_LocalStorage($("#removekey").val());
                                $("#list").click();
                                break;
                            default:

                        }
                    });
                });
            </script>*@
    </div>
</body>
</html>

一下午的成果，当然这样网络消耗很大，后面又给我说了下需求，点击提交按钮才把页面数据存入到缓存，不过改一下就好了。