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
分享到：
相关推荐
【JEECG Local storage&Easyui extension】是一个关于在JEECG框架中使用HTML5的本地存储机制（Local Storage）和EasyUI扩展功能的实践。本文将详细介绍这两个方面及其在项目中的应用。 1. **Local Storage** ...
Local Storage是HTML5引入的一种新的客户端存储机制，与传统的Cookie相比，它具有更大的存储空间（通常为5MB），并且不会随着每次HTTP请求发送到服务器，从而提高了应用性能。Local Storage的数据是以键值对的形式...
HTML5 Web Storage 是一种在浏览器端存储数据的技术，它提供了比传统Cookie更高效、容量更大的存储空间，使得网页可以离线存储数据并提高应用程序的性能。Web Storage 分为两种主要类型：Session Storage 和 Local ...
接着，我们关注Web Local Storage，这是HTML5引入的一个特性，用于在客户端持久存储数据。与Cookie相比，Local Storage具有更大的存储空间（通常为5MB），并且数据不会随着HTTP请求发送到服务器，降低了网络负载。在...
3. **HTML5 Local Storage**：对于现代浏览器，可以使用HTML5的Local Storage API。在`1.htm`页面存储数据，`2.htm`页面可以通过`window.localStorage.getItem()`和`window.localStorage.setItem()`读写数据。Local ...
2. **本地存储或浏览器存储（HTML5 Local Storage / Session Storage）** 随着HTML5的推出，Web应用有了更多的本地存储选择。Local Storage和Session Storage可以用来替代cookie存储用户信息，避免了cookie大小限制...
它允许您清除HTML 5 Local Storage和缓存（JS，...）。 当前本地存储将根据范围删除。 它非常简单快捷：无需复杂的配置，只需单击两次即可。 检查我的网站以获取更多信息：...
5. **HTML5 Local Storage**：为了提高用户体验，聊天记录可能需要在客户端存储，HTML5的Local Storage可以用来存储数据，即使页面刷新，数据也不会丢失。 6. **AJAX和Fetch API**：虽然WebSockets是实时通信的主要...
Local Storage 是紫色，Session Storage 是蓝色，Cookie 是黄色，Swoosh 统统概括 亮点功能：- Local Storage, Session Storage 和 Cookie 3合1编辑器，增删改查搜索收藏及批量操作- 实时自动更新，从此告别手动刷新...
5. HTML5 Local Storage和Session Storage：现代浏览器提供的本地存储机制，允许在用户关闭和重新打开浏览器时保留数据。这在单页应用（SPA）中尤其常见。 在压缩包文件`s2机试_08-12-21`中，可能包含了实现上述...
- HTML5 Local Storage或Session Storage：客户端存储，容量较大，适用于需要持久化用户数据的场景。 7. **遍历并清空TextBox控件** - 示例代码使用了Windows Forms的控件遍历，实际上在ASP.NET中，应使用...
- HTML5 Local Storage 和 Session Storage：这些是现代浏览器提供的本地存储机制，可以用来持久化用户数据，类似Cookie但存储容量更大，且不涉及服务器端。 2. TCP 拥塞控制与AIMD算法： TCP（传输控制协议）使用...
6. **dojo/store**: 数据存储抽象层，支持异步操作，可以与各种数据源（如JSON、XML、HTML5 Local Storage等）交互。 7. **dojo/aspect**: 用于面向切面编程（AOP），提供before、after、around等方法，便于代码的...
对于数据存储，Dojo提供了`dojo/store`接口，可以方便地与各种数据源（如JSON、XML、HTML5 Local Storage）交互。 接下来，我们要关注Dojo的API实例。`dojo/query`是Dojo中的CSS选择器引擎，它可以用来查找和操作...
于是，Web Storage作为HTML5的一项重要特性应运而生，为开发者提供了更高效、更灵活的数据存储解决方案。 Web Storage分为两种类型：Session Storage和Local Storage。它们的主要区别在于数据的生命周期和作用范围...
本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库，这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...
7. **异常处理**：考虑到部分浏览器可能不支持HTML5的Local Storage，需要添加兼容性检测和处理机制，如回退到使用cookies或者sessionStorage。 这个插件的亮点在于其利用了HTML5的离线存储能力，无需频繁与服务器...
- **基本概念**：Local Storage 是HTML5引入的一个新特性，它提供了一种持久化的本地存储方式，相比传统的Cookie，Local Storage 提供了更大的存储空间（通常为5MB，根据浏览器有所不同）且不会随着每次HTTP请求...
【标题】"前端项目-angular-local-storage.zip"是一个包含AngularJS模块的前端开发资源包，它主要功能是为AngularJS应用提供浏览器本地存储的接口。这个模块使得开发者能够方便地利用HTML5的localStorage API来存储...