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