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> 

  觉得不错，点个顶，支持原创！