聊聊本地前端数据的持久化解决方案

最近，公司有活动需要做一个HTML5版简单的抽奖程序，大家一听到这个需求感觉很简单，网上也多的是demo，但细细想想还是有许多东西要考虑的！

需求：

1.抽奖程序运作在平板电脑上，无网络，就是简单的HTML5页面，用浏览器直接打开，无需其它的运行环境；

2.设置一二三等奖及参与奖，每个奖项可配置名额，设置抽奖概率，浏览器刷新时，历史的抽奖数据还要存在；

3.能够看到抽奖的统计数据，包括每等奖项多少名额，已抽取了多少名额，还剩多少名额为抽取；

其中的难点有：

1.利用HTML5中的canvas技术设计抽奖页面；（网上有参考，按自己的需求改改就可以）

2.数据的本地持久化存储(只用前端技术-js)(没有看到抽奖demo没有这个功能)；

下面先看看截图：

版本1：每个奖项显示的区域弧度相同

版本2：每个奖项根据抽中的概率来显示的区域弧度大小

抽奖统计数据页面

接下来说说今天的主题吧，本地前端页面的数据持久化：

最容易想到的解决方案是：

1.使用前端cookie技术来保存本地化数据，如jquery.cookie.js；

2.使用html5提供的localStorage技术来提供解决方案；

但不幸的是第一个解决方案在本案例中(无网络，不需部署)是不可行的，因为：

本地使用js或jquery操作cookie在部分主流浏览器如chrome中不生效；

新手学习js或jquery时，一般是在本地调试（前端学习一般用不到服务器端），当学习到cookie一节时，往往发现在浏览器中调试居然不生效，不管是使用jquery的cookie插件，还是js原生的cookie方法都不生效！

什么原因呢？

原因在于chrome等部分主流浏览器不支持js在本地操作cookie!

据测试，除了chome等浏览器外，其它主流浏览器（ie，firefox等）都支持js在本地操作cookie,当然部署到服务器上（如apache）所有浏览器都是支持的。

当然，还有另一个原因：浏览器设置成不支持cookie，这样，调试js操作cookie当然也是不生效的。

那么，怎么知道当前浏览器不支持或cookie已被禁用呢？可以使用以下js代码：

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60); 
document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
if(!cookiesEnabled) { 
alert("没有启用cookie");//没有启用cookie 
} else{
alert("已经启用cookie");//已经启用cookie 
}

对于第2种方法：

使用HTML5中的localStorage技术，本案例中就使用了这个技术来存储数据，以及使用该数据对页面的初始化；

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。如果是要永久保存的,那么就请使用localStorage方法存取值,如果是要浏览关闭会话结束就清除缓存的,当然就得选择sessionStorage方法了;

浏览器支持情况：
浏览器的支持除了IE７及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
要判断浏览器是否支持localStorage可以使用下面的代码：
if(window.localStorage){ alert("浏览支持localStorage")}else{ alert("浏览暂不支持localStorage")}
//或者
if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage")}

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
用法:sessionStorage.setItem( key, value);localStorage.setItem( key, value)
代码示例：
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem获取value用途：获取指定key本地存储的值
用法:xStorage.getItem(key)
代码示例：
var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

removeItem删除key用途：删除指定key本地存储的值
用法:xStorage.removeItem(key)
代码示例：
sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

clear清除所有的key/value用途：清除所有的key/value
用法:xStorage.clear()
代码示例：
sessionStorage.clear(); 
localStorage.clear();


使用实例：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type='button' onclick='set_item()' value='存值'　/>
<input type='button' onclick='get_item()' value='取值'　/>
<input type='button' onclick='delete_item()' value='删除'　/>
<script>
//localStorage 存值永久有效
function set_item(){
var user = {};
user.name = 'sunfei';
user.age  = 25;
user.home = 'China';
localStorage.setItem('userinfo',JSON.stringify(user));
}
//localStorage取值
function get_item(){
var data = JSON.parse(localStorage.getItem('userinfo'));
alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home);
}
//localStorage删除指定键对应的值
function delete_item(){
localStorage.removeItem('userinfo');
alert(localStorage.getItem('userinfo'));
}
</script>