`
yuruei2000
  • 浏览: 34006 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Web Storage实现本地留言板

 
阅读更多

 

Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。

sessionStorage与localStorage

Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie?

与Cookie相比,Web Storage存在不少的优势,概括为以下几点:

1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。

4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

兼容性如何?

接下来的各种测试是在以下浏览器中进行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事实证明各个浏览器在API方面的实现基本上一致,存在一定的兼容性问题,但不影响正常的使用。

sessionStorage测试

本节主要针对sessionStorage的一些特性进行了测试,测试的重点在于各个浏览器对于session的定义以及跨域情况。测试方法很简单:打开页面A,在页面A中写入当前的session数据,然后通过页面A中的链接或按钮使用不同的方式进入下页面B,如果页面B中能够访问到页面A中的数据则说明浏览器将当前情况的页面A、B视为同一个session。

从表1中可以看出,处于安全性考虑所有浏览器下session数据都是不允许跨域访问的,包括跨子域也是不允许的。其他方面主流浏览器中的实现较为一致。

 

 

 

<h1>Web Storage</h1>

<table>  

        <tr>  

            <td>姓名</td>  

            <td><input type="text" name="name" id="name" /></td>  

        </tr>  

        <tr>  

            <td>留言</td>  

            <td><input type="text" name="memo" id="memo" /></td>  

        </tr> 

		<tr>  

            <td>连接地址</td>  

            <td><input type="text" name="url" id="url" /></td>  

        </tr>  

        <tr>  

            <td></td>  

            <td>  

                <input type="button" value="保存" onClick="saveData()" />  

            </td>  

        </tr>  

		

    </table>  

<div  class="sdsd">

   <div id="datatable" border="1"></div>  

   </div>

 <script>  

var datatable = null; 

var db = openDatabase('MyData', '', 'My Database', 102400);//使用openDatabase方法来创建一个访问数据库的对象 

function init() 

{ 

    datatable = document.getElementById("datatable"); 

    showAllData(); 

} 

function removeAllData() 

{ 

    for (var i =datatable.childNodes.length-1; i>=0; i--) 

    { 

        datatable.removeChild(datatable.childNodes[i]); 

    } 

    var tr = document.createElement('tr'); 

    var th1 = document.createElement('th'); 

    var th2 = document.createElement('th'); 

    var th3 = document.createElement('th'); 

	var th4 = document.createElement('th'); 

    th1.innerHTML = '姓名'; 

    th2.innerHTML = '留言'; 

    th3.innerHTML = '连接地址'; 

	th4.innerHTML = '时间'; 

    tr.appendChild(th1); 

    tr.appendChild(th2); 

    tr.appendChild(th3); 

	tr.appendChild(th4);

    datatable.appendChild(tr); 

} 

function showData(row) 

{ 

    var tr = document.createElement('p'); 

		 tr.setAttribute('class','lmq_p');

    var td1 = document.createElement('li'); 

	var a1=document.createElement('a');

	var urla=document.getElementById('url').value;

		a1.setAttribute('href','http://'+urla);

	var td11=td1.appendChild(a1);

    td11.innerHTML = row.name; 

    var td2 = document.createElement('li'); 

    td2.innerHTML = row.message; 

    var td3 = document.createElement('li'); 

	var td4 = document.createElement('li'); 

    var t = new Date(); 

    t.setTime(row.time); 

    td3.innerHTML=t.getMonth()+"月"+t.getDate()+"日"+"星期"+""+t.toLocaleTimeString(); 

    tr.appendChild(td1); 

    tr.appendChild(td2); 

    tr.appendChild(td3); 

	tr.appendChild(td4);

    datatable.appendChild(tr); 

} 

function showAllData() 

{ 

    db.transaction(function(tx) 

    { 

        tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, url TEXT, time INTEGER)',[]); 

        tx.executeSql('SELECT * FROM MsgData', [], function(tx, rs) 

        { 

            removeAllData(); 

            for(var i = 0; i < rs.rows.length; i++) 

            { 

                showData(rs.rows.item(i)); 

            } 

        }); 

    }); 

} 

function addData(name, message,url, time) 

{ 

 

db.transaction(function(tx) 

{ 

tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?,?)',[name, message, url,time],function(tx, rs) 

{ 

alert("成功保存数据!"); 

}, 

function(tx, error) 

{ 

alert(error.source + "::" + error.message); 

}); 

}); 

} 

function saveData() 

{ 

var name = document.getElementById('name').value; 

var memo = document.getElementById('memo').value; 

var url  = document.getElementById('url').value;

var time = new Date().getTime(); 

addData(name,memo,url,time); 

showAllData(); 

}  

</script> 

  觉得不错,点个顶,支持原创!

1
0
分享到:
评论

相关推荐

    【 YR-HTML5】Web Storage实现本地留言板

    本篇将深入探讨如何利用Web Storage实现一个本地留言板的功能。 首先,我们需要了解`localStorage`和`sessionStorage`的基本用法。两者都是基于键值对(key-value pairs)的数据存储方式,不同之处在于: 1. `...

    html5简易Web留言本

    这个项目的核心目标是创建一个简单的留言板,用户可以在上面留下信息,且这些信息能够在用户下次访问时仍然存在,无需服务器端的支持进行持久化。 在HTML5中,Web Storage分为两种类型:localStorage和...

    HTML5手机视频弹幕文字评价效果的圣诞节留言板源码.zip

    为了存储用户留言,可以利用HTML5的离线存储机制,如Web Storage(包括`localStorage`和`sessionStorage`),将数据保存在本地,便于后续加载和展示。此外,服务器端的接口也可能被调用来处理这些留言,这可能涉及到...

    HTML5浪漫爱心表白动画在线演示程序

    6. **Web Storage**:HTML5的Web Storage(包括localStorage和sessionStorage)允许在本地存储数据,如果这个动画有个性化设置,如定制的留言或图片,这些信息可能会被保存在Web Storage中。 7. **Web Workers**:...

    js-msgboard:原生JS写的留言板,数据存在cookie中

    **JavaScript原生留言板实现详解** 在Web开发中,留言板是一个常见的功能,用于用户之间的互动交流。本项目"js-msgboard"就是使用纯JavaScript语言编写的,数据存储在浏览器的Cookie中,无需依赖任何外部库,如...

    PHP网站模板,网站源码,带PHP后台:灰色大气的设计公司模板基于HTML5+CSS3

    此外,HTML5还支持本地存储(Web Storage)、离线存储(Application Cache)以及多媒体元素(如和标签),无需Flash插件即可播放音频和视频,提升用户体验。 CSS3则是对CSS的增强,提供了更丰富的样式控制,如边框...

    HTML5+CSS3 快速入门 前端 源代码.rar

    30.Web Storage本地储存15:40 31.简单的网页留言板26:36 32.video元素与audio元素的基础知识20:10 33.video元素与audio元素的常用属性32:18 34.HTML5拖放22:41 35.CSS3简介04:11 36.CSS3新增的属性选择器22:17 37....

    html5响应式的绿化种植类公司网站模板.zip

    5. **本地存储**:HTML5的Web Storage API允许网站在用户浏览器中存储数据,如用户偏好设置或购物车信息,提高了用户体验并减轻服务器负担。 6. **CSS3增强**:配合HTML5,CSS3提供了更多的样式控制,如过渡...

    从入门到精通HTML5——PDF——网盘链接

     教学录像:22分钟 ... 1.3.2 文件开始标签&lt;... 7  1.3.3 文件头部标签&lt;... 15.3.1 实现拖放的步骤 290  15.3.2 通过拖放显示欢迎信息 291  15.4 dataTransfer对象应用详解 293  15.4.1 使用effectAllowed...

    建材地板h5响应式html模板源码

    此外,HTML5支持本地存储(Web Storage)、拖放功能(Drag and Drop)以及音频和视频嵌入,使得网站的交互性和功能更加丰富。 模板中的每个页面都有特定的功能,例如: 1. `index.html`通常是首页,展示公司的核心...

    html5自适应个人博客html静态模板

    此外,HTML5还支持本地存储(Web Storage)、离线存储(Application Cache)、拖放功能(Drag and Drop)以及媒体元素(如和),使得网页可以更好地处理多媒体内容,无需依赖Flash等外部插件。 自适应设计...

    婚纱照纪念html5网站模板

    7. **Web存储**: HTML5的Web Storage(包括`localStorage`和`sessionStorage`)允许网站在本地存储数据,使得用户可以保存浏览状态,如已查看的婚纱照或设置的偏好。 8. **Web字体**: 使用`@font-face`规则,HTML5...

    1314.blahgeek.com:http

    7. **Web存储**:如果网站需要在用户关闭浏览器后仍能记住某些信息,JavaScript可以利用Web Storage(包括localStorage和sessionStorage)来保存数据。 8. **API调用**:如果网站需要获取外部数据,比如天气预报、...

    千博HTML5自适应企业网站系统 v2018 Build0630

    还有Web Storage和IndexedDB提供了本地存储解决方案,使得网站能在离线状态下仍能访问部分数据。 系统特点包括: 1. 简单易用的后台操作界面:后台管理界面设计简洁,降低了管理员的学习成本,使得日常的网站维护...

Global site tag (gtag.js) - Google Analytics