JavaScript通过更改Web Storage实现页面间通信

这个API的作用是,使得网页可以在浏览器端储存数据。它分成两类:sessionStorage和localStorage。

sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。

它们很像cookie机制的强化版,能够动用大得多的存储空间。目前,每个域名的存储上限视浏览器而定,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。其中,Firefox的存储空间由一级域名决定,而其他浏览器没有这个限制。也就是说,在Firefox中,a.example.comb.example.com共享5MB的存储空间。另外,与Cookie一样,它们也受同域限制。某个网页存入的数据,只有同域下的网页才能读取。

好了,简介完了,下面上干货:

// 写入数据
sessionStorage.setItem("key","value");

localStorage.setItem("key","value");

// 读取数据
var valueSession = sessionStorage.getItem("key");

var valueLocal = localStorage.getItem("key");

// 删除数据
sessionStorage.removeItem(‘key‘);

localStorage.removeItem(‘key‘);

// 清除所有数据
sessionStorage.clear();

localStorage.clear(); 

这是基本的操作方法。

下面讲如何页面间通信:

1. 在页面A中写监听:

function onStorageChange(e) {
     console.log(e);
}
window.addEventListener("storage",onStorageChange);

2. 页面B中进行任何数据操作都会触发所有同源页面的storage事件。(值得特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。)

流程图片:

a:

b:

c:

时间: 2024-11-05 18:56:23

JavaScript通过更改Web Storage实现页面间通信的相关文章

UINavigationController 导航控制器、页面间通信

UINavigationController 导航控制器.页面间通信 (2014-08-27 10:33:17) 转载 ▼ 正文开始 栈的方式管理? 就是先进后出的管理方式,通过出栈和入栈来展示各个视图控制器 UINavigationController的ContentView里始终显示栈顶控制器的view viewControllers属性存储了栈中的所有被管理的控制器 navigationController属性,父类中的属性,每个在栈中的控制器,都能通过此属性,获取自己所在的UINavig

NavigationViewController页面间通信及传值

使用进行页面跳转时,应该使用方法来跳转至下一页面,这样的话,下一页面同样在容器中. 1AloneSetPrizeViewController *setPrize = [[AloneSetPrizeViewController alloc] init]; //所要跳转页面AloneSetPrizeViewController中有个属性dictionary1是个NSMutableDictionary类型的容器 [setPrize.dictionary1 setObject:[self.txtPass

js 页面间的通信

目录 一.window对象的open方法 1.window对象 2.window对象的open方法 (1)window.open(URL,name,features,replace) (2)用window.open方法实现页面通信 3.window.showModalDialog (1)window.showModalDialog (2)window.showModelessDialog (3)兼容性 4.window的height和width (1)原生js的window.innerWidth

JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

在WEB页面中,我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等,由用户点击某处,然后直接由浏览器帮我们跳转. 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 复制代码 代码如下: function gogogo() { //do someghing here... window.open("test2.html");

【JavaScript】Cookie and Web Storage

这一块自己学习了有一阵子了,但是今天看面试题的时候,让说一下cookie的弊端以及web storage与cookie的区别,竟然还是不知道从何说起,所以,还是要自己认真的梳理一遍. 支持离线的Web应用开发,是HTML5的一个重点.离线Web应用,就是在设备不能上网的时候依然可以运行的应用. 开发离线Web应用需要几个步骤: 1.确保应用知道设备能否上网,以便下一步执行正确的操作.可以使用HTML5定义的navigator.onLine属性来检测. 2.应用必须在离线的时候能够访问一定的资源(

HTML5 Web存储 页面间进行传值

在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可以在本地存储用户的浏览数据.Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以“键/值”对存在, web网页的数据只允许该网页访问使用 方法: localStorage 和 sessionStorage

每天一个JavaScript实例-确定web页面的区域

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-确定web页面的区域</title> <script> function size(){ var width = 0; var heigh

Java WEB 之页面间传递特殊字符

本文是学习网络上的文章时的总结以及自己的一点实践.感谢大家无私的分享. 昨天在做项目的时候,有一个页面间传递特殊字符的需求,查了一些资料.如今将自己的经验写出来. 首先.在前台编码 var fckPurpose=encodeURIComponent($.trim(jQuery("#fckPurpose").val())); encodeURIComponent.encodeURI和escape三个函数区别在于个别字符是否编码的问题. 參考: escape().encodeURI().e

小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html