基于html5一个简单的离线存储

飞哥

2011-12-12

有这样一个场景：
一位用户给网站反馈建议，在运营回复了这个问题之后，用户需要下次登录能看到自己的建议怎么处理了。
目前的情况是：为了保持网站的简洁性，网站并没有提供关于“我的建议”功能，仅仅列出了所有用户的建议。

有以下作法：

1.程序支持，当然没问题，可是UI设计，前端切图，程序开发，程序员不是奴隶，没人愿意这么干，产品也不会愿意。

2.程序简单的支持：COOKIE，SESSION ,程序员还是有点不愿意做
分析：给网站提建议可以匿名提交建议，实际上“我的建议”列表没有用，而且用户可能只会提一两个建议。

所以html5的离线存储刚好可以用上（不考虑浏览器的情况下，我们就给愿意体验最好服务的提供支持）。

用户下次再访问此网站就把此他提的建议放在前面，让他可以马上找到自己的建议。

经过简单测试以下代码能运行于ie8,chrome,firefox其它的没有测试。

首先就是判断浏览器是否支持了：

function checkLocalStorageSupport() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

当用户提交建议后，存储其数据

if(checkLocalStorageSupport())
{
     window.localStorage.setItem("support_title",'XXXX');
}

用户下次访问的时候，读取其数据

if(checkLocalStorageSupport())
{
     var support_title = window.localStorage.getItem("support_title");
     if(support_title != null)
     {
          //把数据展示出来
     }

}

html5的离线应用远比这丰富强大。
参考文档： http://www.infoq.com/cn/search.action?queryString=html5%20存储&searchOrder=relevance&search=html5%20存储

https://www.adobe.com/devnet/archive/html5/articles/html5-storage-apis.html