注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

浅谈:HTML5 本地存储  

2014-06-20 11:00:02|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一.Web数据存储方式
HTML5本地存储是一种新型的存储方式,在这之前WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears。
  最早的Cookies自然是大家都知道,主要问题就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。userData是IE的东西,垃圾。现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用。再之后Google推出了Gears,虽然没有限制,但不爽的地方就是要装额外的插件(没具体研究过)。到了HTML5把这些都统一了,官方建议是每个网站5MB,对于存些字符串,足够了。
HTML5本地存储的兼容性也很不错,兼容情况如下图。

浅谈:HTML5 本地存储 - 淡淡De影痕 - 淡淡De影痕的博客

 二.localStorage与sessionStorage
1.localStorage:没有时间限制的数据存储,利用localStorage方法可以将数据永久保存在本地。
2.sessionStorage:用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,当会话结束后数据也随之销毁。

三.常用方法
localStorage与sessionStorage的应用方法很类似,这里咱们放一块来说。

window.sessionStorage.name = 'wu'; // 赋值
window.sessionStorage.setItem('name','wqf'); // 赋值
window.sessionStorage.getItem('name'); // 取值
window.sessionStorage.removeItem('name'); // 移除值
window.sessionStorage.clear(); // 删除所有sessionStorage


上面这几种方法都很好理解在这里就不多介绍了,除此之外localStorage还可与JSON.stringify结合使用。JSON.stringify可以让对象类型转化成字符串类型,详细的用法可以翻一翻我之前写的JSON.stringify小结。现在咱们看一看JSON.stringify是如何与localStorage结合使用的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5本地存储</title>
</head>
<body>

</body>
<script>
var wu = {"name":"wqf","age":"22"}
localStorage.setItem("wuqingfan",JSON.stringify(wu));
var wu1 = localStorage.getItem("wuqingfan");
alert(wu1)
var wu2 = JSON.parse(localStorage.getItem("wuqingfan")).name;//反解JSON.stringify
alert(wu2)
</script>
</html>

浅谈:HTML5 本地存储 - 淡淡De影痕 - 淡淡De影痕的博客浅谈:HTML5 本地存储 - 淡淡De影痕 - 淡淡De影痕的博客
 
 欢迎大家交流指正~  淡淡De影痕
  评论这张
 
阅读(77)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018