大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)
一,开篇分析
Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,
让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题,
今天主要讲的是“WebStorage API”及在客户端浏览器中的作用,并且会引入一个实际的例子做为讲解的原型范例,让我们先来看看“WebStorage API”:
HTML5提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储 (持久化本地)
sessionStorage - 针对一个 session 的数据存储 (内存方式存储)
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。
此外,在IE6及以上版本中还可以使用userData Behavior,在Firefox下可以使用globalStorage,在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。
针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限)。
假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。
浏览器支持情况,如下图:
二,举个小例子,了解WebStorage
一个小的功能需求:记录用户每次访问页面的次数
见如下代码:
- $(function(){
- if(!_isSupportWebStorage()){
- throw new Error("Not Support WebStorage APIs !") ;
- }
- _storePageCount() ;
- alert(_loadPageCount())
- }) ;
- function _storePageCount(){
- var storage = window.localStorage ;
- var pageLoadCount = storage.getItem("pageLoadCount") ;
- var stepOfCount = 1 ;
- if(!pageLoadCount){
- storage.setItem("pageLoadCount",stepOfCount) ;
- }
- else{
- storage.setItem("pageLoadCount",parseInt(pageLoadCount) + stepOfCount) ;
- }
- } ;
- function _loadPageCount(){
- var storage = window.localStorage ;
- return storage.getItem("pageLoadCount") ;
- } ;
- function _isSupportWebStorage(){
- return !!window.localStorage ;
- } ;
运行效果:
每次刷新页面时打印出访问量的次数
跟踪本地数据情况:
很清晰了,这时数据已经持久化到本地的硬盘上了,哈哈哈!
"WebStorage API"走马观花:
length------当前Storage对象中存储的key/value对的总数
setItem(key, value)-------将key对象的值设置为value,value为String类型,当设置失败,比如用户将本地存储禁用,或者本地存储超过限制的大小时,抛出QuotaExceededError错误
getItem(key)------返回key对应的值,如不存在,返回null
removeItem(key)------如果key在storage中存在,将key对应的key/value对从storage对象中删除;注意:不会返回删除的 value,如果key在storage中不存在,不进行任何处理
clear()------清除Storage对象上所有的key-value值
key(index)------返回index对应位置的key值,当index>length时,返回null,往storage对象上添加key-value值,通过key(index)取回的键是不固定的,跟通过for...in遍历普通的对象一样,依赖于浏览器的实现
这里列举出一些等价的操作:
localStorage.author = "bigbear" ;
localStorage["author"] = "bigbear" ;
localStorage.setItem("author","bigbear") ;
三,引入实例
今天给大家分享一个留言实时保存的例子。
js代码如下:
- function upInfo() {
- var lStorage = window.localStorage;
- var show = window.document.getElementById("show");
- if (window.localStorage.myBoard) {
- show.value = window.localStorage.myBoard;
- } else {
- var info = "还没有留言";
- show.value = "还没有留言";
- }
- }
- function addInfo() {
- var info = window.document.getElementById("t1");
- var lStorage = window.localStorage;
- if (lStorage.myBoard) {
- var date = new Date();
- lStorage.myBoard += t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
- } else {
- var date = new Date();
- lStorage.myBoard = t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
- }
- upInfo();
- }
- function cleanInfo() {
- window.localStorage.removeItem("myBoard");
- upInfo();
- }
- upInfo();
html如下:
- <body>
- <div>
- <h2>简单的web存储留言板</h2>
- <textarea id="t1"></textarea>
- <br />
- <input type="button" onclick="addInfo()" value="留言" />
- <input type="button" onclick="cleanInfo()" value="清除留言" />
- <br />
- <hr />
- <label id="shows"></label>
- <textarea id="show" readonly="readonly"></textarea>
- </div>
- </body>
运行效果,如下:
(四),最后总结
(1),理解WebStorage Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。
(2),两个核心Api的不同之处在哪。
(3),不断重构上面的实例,如何进行合理的重构那?不要设计过度,要游刃有余,推荐的方式是过程化设计与面向对象思想设计相结合。
哈哈哈,本篇结束,未完待续,希望和大家多多交流够沟通,共同进步。。。。。。呼呼呼……(*^__^*)
大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)的更多相关文章
- 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------Online && Offline(在线状态检测)
一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- HTML5的五种客户端离线存储方案
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...
- HTML5五种客户端离线存储方案
最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...
- 四种有能力取代Cookies的客户端Web存储方案
目前在用户的网络浏览器中保存大量数据需要遵循几大现有标准,每一种标准都拥有自己的优势.短板.独特的W3C标准化状态以及浏览器支持级别.但无论如何,这些标准的实际表现都优于广泛存在的cookies机制. ...
- Android(java)学习笔记174:SharedPreferences(轻量级存储类)
1.SharedPreferences是Android平台上一个轻量级的存储类,简单的说就是可以存储一些我们需要的变量信息.2个activity 之间的数据传递除了可以他通过intent来传递数据,还 ...
随机推荐
- Fragment调用Activity
public void onClick(View arg0) { Intent intent = new Intent(); intent ...
- 第一次在Django上编写静态网页
新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...
- <a>链接的四个伪类顺序
<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...
- 重新走过HTML,那些让我amazing 的标签
这一次我用了短暂的时间重新梳理了html的标签(包括html5 新增),发现我以前忽略了很多又轻巧又精美且实用的标签,总结如下: 格式标签: <address> 标签: 定义文档或文章的作 ...
- jQuery与Struts2综合应用[stream/json]
一.使用stream类型的Result实现Ajax 具体步骤: ① 定义InputStream类型的成员变量及getter和setter ②具体业务方法中将要发送到客户端的json字符串赋值给成员变量 ...
- CentOS7安装MySQL、Redis、RabbitMQ
系统版本 CentOS Linux release 7.2.1511 (Core) MySQL安装 一.下载mysql的repo源 wget http://repo.mysql.com/mysql-c ...
- java并发编程学习:用 Semaphore (信号量)控制并发资源
并发编程这方面以前关注得比较少,恶补一下,推荐一个好的网站:并发编程网 - ifeve.com,上面全是各种大牛原创或编译的并发编程文章. 今天先来学习Semaphore(信号量),字面上看,根本不知 ...
- js 运算符
一.算术运算符: 1.运算符: “+”:功能:对数字进行代数求和:对字符串进行连接操作:将一个数值转换为字符串(数值+空字符串). “-”:功能:对操作数进行取反操作:对数字进行减法操作:将字符串转换 ...
- ASP.NET中的缓存机制
ASP.NET 提供一个功能完整的缓存引擎,页面可使用该引擎通过 HTTP 请求存储和检索任意对象.缓存的生存期与应用程序的生存期相同,也就是说,当应用程序重新启动时,将重新创建缓存. 将数据添加到缓 ...
- .Net配置中心-服务端/客户端
服务端 管理应用,一个应用对应一个站点. 管理应用下的配置. 在保存配置的时候,会更新应用的版本号. 客服端 其他站点引用DLL,并在Global的App_Start中调用ConfigCenter的I ...