HTML5本地储存--利用storage事件实时监听Web Storage
2017-06-16 14:17
483 查看
在事件处理函数中,触发事件的事件对象(event参数值)具有如下几个属性
event.key 属性:属性值为在 session 或 localStorage 中被修改的数据键值。
event.oldValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改的值。
event.newValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改后的值
event.url 属性:属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址
event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象
代码中用到的函数:
charCodeAt() 可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
unescape() 可对通过 escape() 编码的字符串进行解码。
下面是关于Unicode码的一些注解:
Unicode只有一个字符集,中、日、韩的三种文字占用了Unicode中0x3000到0x9FFF的部分 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个字符, 比如汉字”经”的编码是0x7ECF,注意字符码一般用十六进制来 表示,为了与十进制区分,十六进制以0x开头,0x7ECF转换成十进制 就是32463,UCS-2用两个字节来编码字符,两个字节就是16位二进制, 2的16次方等于65536,所以UCS-2最多能编码65536个字符。 编码从0到127的字符与ASCII编码的字符一样,比如字母”a”的Unicode 编码是0x0061,十进制是97,而”a”的ASCII编码是0x61,十进制也是97, 对于汉字的编码,事实上Unicode对汉字支持不怎么好,这也是没办法的, 简体和繁体总共有六七万个汉字,而UCS-2最多能表示65536个,才六万 多个,所以Unicode只能排除一些几乎不用的汉字,好在常用的简体汉字 也不过七千多个,为了能表示所有汉字,Unicode也有UCS-4规范,就是用 4个字节来编码字符
Unicode码图册:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201706/af25ea90f1e4da54ffba3da860d8437f)
实际效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201706/c9ad314f1ec9b3e441c59781c3aceb40)
实时监听的页面:
被监听的页面:
event.key 属性:属性值为在 session 或 localStorage 中被修改的数据键值。
event.oldValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改的值。
event.newValue 属性:属性值为在 sessionStorage 或 localStorage 中被修改后的值
event.url 属性:属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址
event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象
代码中用到的函数:
charCodeAt() 可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
unescape() 可对通过 escape() 编码的字符串进行解码。
下面是关于Unicode码的一些注解:
Unicode只有一个字符集,中、日、韩的三种文字占用了Unicode中0x3000到0x9FFF的部分 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个字符, 比如汉字”经”的编码是0x7ECF,注意字符码一般用十六进制来 表示,为了与十进制区分,十六进制以0x开头,0x7ECF转换成十进制 就是32463,UCS-2用两个字节来编码字符,两个字节就是16位二进制, 2的16次方等于65536,所以UCS-2最多能编码65536个字符。 编码从0到127的字符与ASCII编码的字符一样,比如字母”a”的Unicode 编码是0x0061,十进制是97,而”a”的ASCII编码是0x61,十进制也是97, 对于汉字的编码,事实上Unicode对汉字支持不怎么好,这也是没办法的, 简体和繁体总共有六七万个汉字,而UCS-2最多能表示65536个,才六万 多个,所以Unicode只能排除一些几乎不用的汉字,好在常用的简体汉字 也不过七千多个,为了能表示所有汉字,Unicode也有UCS-4规范,就是用 4个字节来编码字符
Unicode码图册:
实际效果:
实时监听的页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用storage事件实时监视Web Storage中的数据</title> </head> <body> <script type="text/javascript"> //利用storage事件实时监视wev Storage中的数据 window.addEventListener('storage',function (e) {//e只是一个传参 //获取被修改的键值 if (e.key == 'test') { //获取将要被添加内容的元素 var output = document.getElementById('output'); //将获取到的修改值在元素中输出 output.innerHTML = '原有值:' + e.oldValue; output.innerHTML += '<br />新值:' + e.newValue; output.innerHTML += '<br />变动页面地址:' + utf8_decode(unescape(e.url)); //分别打印会发现内容一致 console.log(e.storageArea); console.log(localStorage); //此行代码只在Chrome浏览器中有效 console.log(e.storageArea === localStorage);//输出true } },false); function utf8_decode (utftext) { var string = ''; var i = c = c1 = c2 = 0; //获取URL所有字符 while (i < utftext.length) { //获取URL并将URL中所有 Unicode 编码获取 c = utftext.charCodeAt(i); //对 Unicode 编码进行处理转化成字符串 if (c < 128) { string += String.fromCharCode(c); i++; } else if ((c < 191) && (c < 224)) { c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & < 4000 span class="hljs-number">63)); i += 3; } } return string; } </script> <output id="output"></output> </body> </html>
被监听的页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用于修改localStorage 中数据的页面的代码</title> </head> <body> <script type="text/javascript"> function setLOcalStorage () { //设置test键值下的内容等于input框中的内容 localStorage.test = document.getElementById('text1').value; } </script> 请输入一些值:<input type="text" id="text1" /> <button onclick="setLOcalStorage()">设置</button> </body> </html>
相关文章推荐
- HTML5本地储存--利用storage事件实时监听Web Storage
- HTML5之本地存储对象Web Storage和storage事件监听无效问题
- HTML5本地储存追加利用html5的本地存储功能实现登录用户信息保存
- (八)webStorage使用实例——利用storage事件实时监视webStorage中的数据
- html5客户端本地存储之sessionStorage及storage事件
- HTML5本地储存localStorage/sessionStorage
- HTML5 storage事件监听
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
- 【html5】Web Storage本地存储 sessionStorage/localStorage
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
- html5客户端本地存储之sessionStorage及storage事件
- HTML5本地储存--Web Storage
- sessionStorage html5客户端本地存储之sessionStorage及storage事件
- js跨页面触发事件,利用storage监听事件
- 转载: html5客户端本地存储之sessionStorage及storage事件
- html5客户端本地存储之sessionStorage及storage事件
- HTML5--本地存储Web Storage
- HTML5特性 > 本地储存 >HTML5本地存储详解
- Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用
- HTML5本地存储之Web Storage应用介绍