下面小编就为大家带来一篇深入剖析webstorage[html5的本地数据处理]。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
1.webstorage是什么？
webstorage是html5中用于本地化存储的一种方式，而在之前呢我们是用cookie的存储方式处理;
2.那它们之间的区别是什么？
ⅰ.cookie存在的问题：
ⅰ.cookie需要向服务端发送一个请求，服务端返回一个cookieid，存储用浏览器缓存里,需消耗一定的带宽。[cookie会随着每次http请求头信息一起发送，无形中增加了网络流量];
ⅱ.cookie存储的数据容量有限，根据浏览器类型不同而不同，ie6大约只能存储2k;
ⅱ.而webstorage只需把数据存储于本地;
3.我们可以举一个小例子说明一下
eg:输入用户名和密码，点击按钮1时，把数据保存起来，点击按钮2，页面刷新还可以获取到；
过程：
ⅰ.创建一个事件
xml/html code复制内容到剪贴板
function myclick1()
{
}
ⅱ.通过一个id获取到它的用户名
javascript code复制内容到剪贴板
var
username = $(
"#txtusername"
).val();
ⅲ.通过一个id获取到它的密码
javascript code复制内容到剪贴板
var
pwd = $(
"#txtpwd"
).val();
ⅳ.用户名和密码获取到之后，我们要怎么存数据呢？有两种方式：
①. 第一种：sessionstorege,使用于firefox2+的火狐浏览器;
生命周期：用这种方式存储的数据仅窗口级别有效，同一个窗口（或者tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了[仅限当前页面]
缺点：ie不支持，不能实现数据的持久保存。
javascript code复制内容到剪贴板
sessionstorage.setitem("k_username", username); sessionstorage.setitem("k_pwd", pwd);
注：sessionstorage.setitem是通过键值对的方式存储;
②.第二种方式:localstorage
localstorage是web storage互联网存储规范中的一部分，现在在firefox 3.5、safari 4和ie8中得到支持。
生命周期：存于本地c盘，浏览器关闭打开之后还有;
缺点：低版本浏览器不支持。
javascript code复制内容到剪贴板
localstorage.setitem("k_username", username);
localstorage.setitem("k_pwd",pwd);
ⅴ.打印
javascript code复制内容到剪贴板
alert("保存成功！");
ⅵ.按钮2打印以上所有数据
第一种方式打印：
javascript code复制内容到剪贴板
function myclick2() {
alert(sessionstorage.getitem("k_username"));
alert(sessionstorage.getitem("k_pwd"));
}
第二种方式打印
javascript code复制内容到剪贴板
function myclick2() {
alert(localstorage.getitem("k_username"));
alert(localstorage.getitem("k_pwd"))
}
结果显示:
ⅶ.扩展：localstorage的removeitem方法
//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空
//localstorage.removeitem("k_username");
跟踪本地数据情况:
结果显示:
ⅷ.localstorage的clear方法
//如果我想把所有数据都清除？localstorage有个方法
localstorage.clear();
结果显示:
代码显示：
xml/html code复制内容到剪贴板
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/webst.js"></script>
<script type="text/javascript">
function myclick1() {
//1.获取到它的用户名和密码
var username = $("#txtusername").val();
var pwd = $("#txtpwd").val();
//2.sessionstrage的方式
//sessionstorage.setitem("k_username", username);
//sessionstorage.setitem("k_pwd", pwd);
//第二种方式
localstorage.setitem("k_username", username);
localstorage.setitem("k_pwd",pwd);
//3.打印
alert("保存成功！");
}
function myclick2() {
//4.打印以上
//第一种方式
//alert(sessionstorage.getitem("k_username"));
//alert(sessionstorage.getitem("k_pwd"));
//第二种方式打印
//如果我想删除它的用户名怎么做呢？通过它的key把它删除,这样获取时就为空
//localstorage.removeitem("k_username");
//如果我想把所有数据都清除？localstorage有个方法
localstorage.clear();
alert(localstorage.getitem("k_username"));
alert(localstorage.getitem("k_pwd"))
}
</script>
</head>
<body>
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text" id="txtusername" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="txtpwd" />
</td>
</tr>
<tr>
<td>
<input type="button" value="按钮1" onclick="myclick1()"/>
</td>
<td>
<input type="button" value="按钮2" onclick="myclick2()"/>
</td>
</tr>
</table>
</body>
</html>
4.webstorage制作简易留言板[代码为了展示效果所以把js就直接在html里面写]
xml/html code复制内容到剪贴板
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
//4.页面刷新之后判断它是否为空？
if (localstorage.getitem("k_showcon") != null) {
//5.存在，就把获取到的内容存到里面去
"k_showcon", $("#showcon").html(localstorage.getitem("k_showcon"));
}
});
function preservationclick()
{
var scon = $("#mcon").val();
//2.获取到内容之后加到显示p里去？怎么放呢？这里我们用append方法
$("#showcon").append("<p>" + scon + "</p>");
//3.预期的是刷新之后留言还在
localstorage.setitem("k_showcon", $("#showcon").html());
}
function clearclick()
{
//6.获取到显示p里面的内容清除
$("#showcon").html("");
localstorage.clear();
}
</script>
</head>
<body>
<p>
<table>
<tr>
<td colspan="2">
<textarea id="mcon" cols="25" rows="10"></textarea>
</td>
</tr>
<tr>
<td><input type="button" value="留言" onclick="preservationclick()" /></td>
<td><input type="button" value="清除" onclick="clearclick()" /></td>
</tr>
</table>
<p id="showcon"></p>
</p>
</body>
</html>
效果显示:
以上就是深入剖析webstorage--html5的本地数据处理的详细内容。