H5 storage事件

用户9184480

发布于 2024-12-17 10:04:44

5000

代码可运行

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="header">
</div>
      <div class="demo">
          <p><label for="data">Your test data:</label> <input type="text" name="data" value="" placeholder="change me" id="data" /><input type="button" value="保存localStorage数据" id="save"/></p>
          <p id="fromEvent">Waiting for data via <code>storage</code> event...</p>
      </div>
</div>
<script type="text/javascript">
var addEvent = (function() {
    if (document.addEventListener) {
        return function(el, type, fn) {
            if (el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            } else {
                el.addEventListener(type, fn, false);
            }
        };
    } else {
        return function(el, type, fn) {
            if (el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            } else {
                el.attachEvent('on' + type,
                function() {
                    return fn.call(el, window.event);
                });
            }
        };
    }
})();


var dataInput = document.getElementById('data'),
    output = document.getElementById('fromEvent'),
save = document.getElementById('save');
addEvent(window, 'storage', function (event) {
  if (event.key == 'storage-event-test') {
      output.innerHTML ="key:"+event.key+" ---- old:"+event.oldValue+" ---- new:"+ event.newValue;
  }
});
addEvent(save, 'click', function () {
  localStorage.setItem('storage-event-test', dataInput.value);
});
</script>
  </body>
</html>

HTML5提供一个storage事件，当setItem()、removeItem()或者clear()方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意，只有数据真的发生了变化，才会触发storage事件。也就是说，如果当前的存储区域是空的，调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，storage事件也是不会被触发的torage事件的

Event对象包含如下属性：

 storageArea，表示存储类型（localstorage或sessionstorage）；

 key，发生改变的项的key

 oldValue，发生改变的项的原值

 newValue，发生改变的项的新值

 url， key改变发生的URL