其他分享
首页 > 其他分享> > ----HTML5本地储存--利用storage事件实时监听Web Storage----

----HTML5本地储存--利用storage事件实时监听Web Storage----

作者：互联网

事件属性

在事件处理函数中，触发事件的事件对象（event参数值）具有如下几个属性

event.key 属性：属性值为在 session 或 localStorage 中被修改的数据键值。 
event.oldValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改的值。 
event.newValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改后的值 
event.url 属性：属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址 
event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象

使用函数

  1.   charCodeAt() 可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
  2.   fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
  3.   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码图册

alt

实际效果

alt

实时监听的页面

  1.   <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.   <meta charset="UTF-8">
  5.   <title>利用storage事件实时监视Web Storage中的数据</title>
  6.   </head>
  7.   <body>
  8.   <script type="text/javascript">
  9.    
  10.   //利用storage事件实时监视wev Storage中的数据
  11.   window.addEventListener('storage',function (e) {//e只是一个传参
  12.   //获取被修改的键值
  13.   if (e.key == 'test') {
  14.   //获取将要被添加内容的元素
  15.   var output = document.getElementById('output');
  16.   //将获取到的修改值在元素中输出
  17.   output.innerHTML = '原有值：' + e.oldValue;
  18.   output.innerHTML += '<br />新值:' + e.newValue;
  19.   output.innerHTML += '<br />变动页面地址：' + utf8_decode(unescape(e.url));
  20.    
  21.   //分别打印会发现内容一致
  22.   console.log(e.storageArea);
  23.   console.log(localStorage);
  24.   //此行代码只在Chrome浏览器中有效
  25.   console.log(e.storageArea === localStorage);//输出true
  26.    
  27.   }
  28.   },false);
  29.   function utf8_decode (utftext) {
  30.   var string = '';
  31.   var i = c = c1 = c2 = 0;
  32.   //获取URL所有字符
  33.   while (i < utftext.length) {
  34.   //获取URL并将URL中所有 Unicode 编码获取
  35.   c = utftext.charCodeAt(i);
  36.   //对 Unicode 编码进行处理转化成字符串
  37.   if (c < 128) {
  38.   string += String.fromCharCode(c);
  39.   i++;
  40.   }
  41.   else if ((c < 191) && (c < 224)) {
  42.   c2 = utftext.charCodeAt(i + 1);
  43.   string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
  44.   i += 2;
  45.   }
  46.   else {
  47.   c2 = utftext.charCodeAt(i + 1);
  48.   c3 = utftext.charCodeAt(i + 2);
  49.   string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
  50.   i += 3;
  51.   }
  52.   }
  53.   return string;
  54.   }
  55.   </script>
  56.   <output id="output"></output>
  57.   </body>
  58.   </html>

被监听的页面

  1.   <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.   <meta charset="UTF-8">
  5.   <title>用于修改localStorage 中数据的页面的代码</title>
  6.   </head>
  7.   <body>
  8.   <script type="text/javascript">
  9.   function setLOcalStorage () {
  10.   //设置test键值下的内容等于input框中的内容
  11.   localStorage.test = document.getElementById('text1').value;
  12.   }
  13.   </script>
  14.   请输入一些值：<input type="text" id="text1" />
  15.   <button onclick="setLOcalStorage()">设置</button>
  16.   </body>
  17.   </html>     https://blog.csdn.net/chendeyou5/article/details/79449608

标签：Web,编码,Storage,storage,utftext,localStorage,Unicode,event,属性
来源： https://www.cnblogs.com/zjy850984598/p/11098129.html