您的位置：首页 > 其它

实现跨文档信息传递之localStorage本地存储方法

2015-11-23 11:24 288 查看

实现跨文档信息传递之localStorage本地存储方法

2011-12-29 15:51| 发布者:
admin| 查看: 5515| 评论:

1

摘要: Cookie在web中得到广泛应用，但局限性非常明显，容量太小，有些站点会因为出于安全的考虑而禁用cookie，cookie没有想象中的那么安全。 Flash SharedObject使用的是kissy的store模块来调用Flash SharedObject。Flash ...

Cookie在web中得到广泛应用，但局限性非常明显，容量太小，有些站点会因为出于安全的考虑而禁用cookie，cookie没有想象中的那么安全。

Flash SharedObject使用的是kissy的store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中，基本上不存在兼容性问题，缺点是要在页面中引入特定的swf和js文件，增加额外负担，处理繁琐；还是有部分机子没有flash运行环境。

Google GearsGoogle的离线方案，已经停止更新，官方推荐使用html5的localStorage方案。

User DataIE的早期版本的本地存储方案，看上去有点怪异

localStorage

相对于上述本地存储方案，localStorage有自身的优点：容量大、易用、强大、原生支持；

缺点是兼容性差些（主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）。

localStorage的API
非常通俗易懂的接口

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value)：将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值

留意localStorage存储的值都是字符串类型，在处理复杂的数据时，比如json数据时，需要借助JSON类，将json字符串转换成真正可用的json格式，localStorage第二个实战教程会重点演示相关功能。

localStorage还提供了一个storage事件，在存储的值改变后触发，比如下面代码：

if (window.addEventListener) {

window.addEventListener("storage", storageHandler, false);

} else if (window.attachEvent) {

window.attachEvent("onstorage", storageHandler);

}

function storageHandler(ev){

if(!ev){ev=window.event;}

console.log('改变的字段是'+ev.key);

console.log('旧的值是'+ev.oldValue);

console.log('新的值是'+ev.newValue);

}

以下是利用localStorage实现跨文档数据传递的实例：

源码下载：Download

演示地址：http://31358.cn/demo/storage/

页面主体部分：

<article>
<section>
<p><strong>说明：</strong>在两个以上窗口或新标签页中打开此页面并在其中一窗口中输入信息并按回车，消息会即时传递其它窗口中</p>
<p>本页面通过Html5中的<code>localStorage</code>方法实现跨文档数据传递.</p>
<div>
<p><label for="data">输入测试内容</label> <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(按回车，你的输入只能显示于<em>其它</em>窗口)</small></p>
<p id="fromEvent">等待从其它窗口发送的容……</p>
</div>
</section>
</article>

JS实现代码：

var dataInput = document.getElementById('data'),
output = document.getElementById('fromEvent');

addEvent(window, 'storage', function (event) {
if (event.key == 'storage-event-test') {
output.innerHTML = event.newValue;
}
});

addEvent(dataInput, 'keyup', function () {
localStorage.setItem('storage-event-test', this.value);
});

自己动手试一试：

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<meta name="viewport" content="width=620">

<title>html5演示：Storage 事件</title>

<link rel="stylesheet" href="http://www.31358.cn/demo/storage/style.css">

<script src="http://www.31358.cn/demo/storage/s.js"></script></head>

<style>

article div {

margin: 10px 0;

}

4000
label {

float: left;

display: block;

width: 125px;

line-height: 32px;

}

#fromEvent {

border: 1px solid #ccc;

padding: 10px;

}

</style>

<body>

<section id="wrapper">

    <header>

      <h1>html5演示：Storage 事件</h1>

    </header>

<article>

<section>

    <p><strong>说明：</strong>在两个以上窗口或新标签页中打开此页面并在其中一窗口中输入信息并按回车，消息会即时传递其它窗口中</p>

    <p>本页面通过Html5中的<code>localStorage</code>方法实现跨文档数据传递.</p>

    <div>

      <p><label for="data">输入测试内容</label> <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(按回车，你的输入只能显示于<em>其它</em>窗口)</small></p>

      <p id="fromEvent">等待从其它窗口发送的容……</p>

    </div>

</section>

</article>

<script>

var dataInput = document.getElementById('data'),

    output = document.getElementById('fromEvent');

addEvent(window, 'storage', function (event) {

if (event.key == 'storage-event-test') {

    output.innerHTML = event.newValue;

}

});

addEvent(dataInput, 'keyup', function () {

localStorage.setItem('storage-event-test', this.value);

});

</script>

<footer><a href="http://www.31358.cn/">HTML5+CSS3技术中文网</a>｜<script
src="http://s11.cnzz.com/stat.php?id=2105302&web_id=2105302" language="JavaScript"></script>

</footer>

</section>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： cookie

相关文章推荐

新的分享

章节导航