跨文档信息传递之localStorage本地存储



跨文档信息传递之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的离线方案,已经停止更新,官方推荐使用html5localStorage方案。
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;
}
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&amp;web_id=2105302" language="JavaScript"></script>
</footer>
</section>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值