1. window对象sessionStorage 和 localStorage
localStorage 可以在浏览器关闭的情况下长久保存数据,多个标签页直接可以共享数据,但是不能跨浏览器。localStorage的作用域是用协议,主机名,端口来确定的,因此下面的URL直接不能共享数据:
http://www.example.com
http://wap.example.com
http://www.example.com:8080
https://www.example.com
sessionStorage 只能在一个浏览器标签页不关闭的情况下保存数据,多个标签页不能共享数据,一旦标签也关闭数据也就消失了。
2. sessionStorage和localStorage都实现了Storage接口,因此我们可以使用如下属性和方法访问存储的数据:
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};
3. Storage事件
StorageEvent定义
[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
使用如下方法添加时间监听器。当作用范围内的数据改变时,处理方法将被触发:
window.addEventListener('storage', printStorageEvent(event), true);
function printStorageEvent(e){
var log='key=' + e.key +', oldValue=' +e.oldValue + ', newValue=' +e.newValue+', url='
+ e.url;
document.write(e);
}
4. 例子:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener('storage', printStorageEvent(event), true);
function printStorageEvent(e){
var log='key=' + e.key +', oldValue=' +e.oldValue + ', newValue=' +e.newValue+', url='
+ e.url;
document.write(e);
}
var i=localStorage.pagecount;
if(i){
localStorage.pagecount=Number(i)+1;
}else{
localStorage.pagecount=1;
}
document.write('local:'+localStorage.pagecount);
var j=sessionStorage.pagecount;
if(j){
sessionStorage.pagecount=Number(j)+1;
}else{
sessionStorage.pagecount=1;
}
document.write("session:"+sessionStorage.pagecount);
</script>
</body>
</html>
参考文档:
http://www.w3.org/TR/webstorage/#the-storage-event
分享到:
相关推荐
它允许您清除HTML 5 Local Storage和缓存(JS,...)。 当前本地存储将根据范围删除。 它非常简单快捷:无需复杂的配置,只需单击两次即可。 检查我的网站以获取更多信息:...
Local Storage 是紫色,Session Storage 是蓝色,Cookie 是黄色,Swoosh 统统概括 亮点功能:- Local Storage, Session Storage 和 Cookie 3合1编辑器,增删改查搜索收藏及批量操作- 实时自动更新,从此告别手动刷新...
在HTML 5中,localstorage是个不错的东西,在支持localstorage的浏览器中, 能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器...HTML5 Local Storage Example</title> <!– include Bootstrap CSS
-save用法创建服务包装器(可选) app .factory('myStorageService', ['ngHTML5Storage', function(ngHTML5Storage){ return { saveStuffInLocalStorage: function(key, value){ return ngHTML5Storage.local(key, ...
DoogieWrite将原始Javascript与HTML5 Local Storage结合使用,以允许用户在Web浏览器中保存单个文档。 一个简单PHP脚本用于允许用户将他们的文档下载为一个简单的txt文件。 还利用了HTML5音频。 :) 未来的改进将...
调查数据存储在HTML5 Local Storage和Cordova File Plugin中的CSV文件中,以便将CSV文件写入Android根目录中。 然后,用户可以使用内置的文件查看器保存CSV文件,以保存到其预期的云存储服务或计算机。 ==========...
Html5 的local storage 是通过浏览器在本地存储的数据。基本使用方法如下: JavaScript Code复制内容到剪贴板 [removed] localStorage.firstName = "Tom"; alert(localStorage.firstName); ...
HTML 5 Local Storage用于维护状态。 我之所以这么做,主要是因为我自己使用,因为我想要一种简单而流畅的浏览r / pics的方法。 用法 RIB是一种在Reddit上浏览所有图像帖子的快速简便的方法。 由于针对跨源脚本的...
HTML5 Gamesshows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest ...
书名:HTML5 for .NET Developers 副标题:Single Page Web Apps, JavaScript and Semantic Markup 作者:Jim Jackson II 和 Ian Gilman ...9 Local storage and state management 248 10 Offline web applications 273
With support for standards-driven mobile app development, powerful features like local storage and WebSockets, superb audio and video APIs, and new layout options using CSS3, SVG, and Canvas, HTML5 ...
The Audio tag allows sounds to be triggered and played from within your HTML code, the WebSockets API facilitates real-time communication, and the local storage API enables data such as high scores ...
使用local storage 我们使用localStorage对象来访问local storage,他返回Storage对象,Storage用来存储键值对的数据,他有下面一些属性和方法: clear():清楚存储的键值对数据; getItem():通过key获取value值; ...
角度本地存储Angular 本地存储服务。安装在您的应用中包含“local-stroage.service.js”。...用法该模块公开了一个“LocalStorage”工厂,它是 HTML5 localStorage 的 API。去做在 readme.md 中完成用法和 API
time communication, and the local storage API enables data such as high scores or game preferences to be kept on a user's computer to be retrieved next time they play your game. All of these features ...
With support for standards-driven mobile app development, powerful features like local storage and WebSockets, superb audio and video APIs, and new layout options using CSS3, SVG, and Canvas, HTML5 ...
多 亏了HTML5的 local storage ,我们可以让高级浏览器"记住"我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5....
time communication, and the local storage API enables data such as high scores or game preferences to be kept on a user's computer to be retrieved next time they play your game. All of these features ...
416 pages Publisher: Manning Publications; Pap/Psc edition (December ...Local storage, threading, and WebSockets Using JSON-enabled web services WCF services for HTML5 How to build single page web apps