自定义事件监听&localstorage事件监听

胖鹅68

已于 2023-03-09 16:50:50 修改

阅读量2.8k

点赞数

分类专栏： Html5、JavaScript、ES6 文章标签： javascript 前端 json

于 2020-01-02 20:47:26 首次发布

本文链接：https://blog.csdn.net/hbiao68/article/details/103810969

版权

Html5、JavaScript、ES6 专栏收录该内容

82 篇文章 3 订阅

订阅专栏

文章目录

文章参考
一、localStorage的增、删、改
二、onstorage事件
三、自定义storage事件

文章参考

一、localStorage的增、删、改

存储的数据只能是字符串，不能存储对象（JSON、Array、Date等）

可以把JSON和数组转为字符串之后再存储

sessionStorage 在关闭浏览器之后，存储的数据会消失，而localStroage不会
localStorage 属性允许你访问一个Document 源（origin）的对象 Storage（类比跨域）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>
        <button onclick="addStorage()">添加storage</button>
        <script>
          let userInfo = {
            username: '张三',
            age: 18,
            hobbies: ['篮球', '美女', '电影'],
            isMarried: false,
            birthDay: new Date(1999, 8, 12),
            address: {
              provice: '长沙市',
              area: '雨花区',
              isGood: false,
            },
            getName: function () {
              console.log('getname 方法');
            },
          };
          function addStorage() {
            // 序列化的Date对象会转为字符串，反序列化没有办法转为Date对象
            let userInfoStr = JSON.stringify(userInfo)
            console.log(userInfoStr)
            // 存储数据，只能存储字符串
            window.localStorage.setItem('userInfo', userInfoStr);
          }
        </script>
      </li>
      <li>
        <button onclick="updateStorage()">修改storage</button>
        <script>
          function updateStorage() {
            // 获取数据
            let userInfoStr = localStorage.getItem('userInfo')
            let userInfo = JSON.parse(userInfoStr)
            // 序列化的Date对象会转为字符串，反序列化没有办法转为Date对象
            console.log(userInfo)
            userInfo.age = 60
            // JSON 对象删除某个属性
            delete userInfo.birthDay
            console.log(userInfo)
            const newUserInfoStr = JSON.stringify(userInfo)
            localStorage.setItem('userInfo', newUserInfoStr)
          }
        </script>
      </li>
      <li>
        <button onclick="delStorage()">删除storage</button>
        <script>
          function delStorage() {
            localStorage.removeItem('userInfo')
          }
        </script>
      </li>
    </ul>
  </body>
</html>

二、onstorage事件

注意事项

Chrome浏览器不会在当前标签页触发onstorage事件，IE浏览器则同时在所有标签页触发。
需要使用document.hasFocus()判断是否是当前标签页。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      function saveTo() {
        localStorage.setItem('change-event', new Date().toJSON());
      }
      window.onstorage = function (e) {
        console.log(e);
        console.log(`The ${e.key} key has been changed from ${e.oldValue} to ${e.newValue}.`);
        console.log(document.hasFocus());

        // IE will receive the event both the current tab and other tab
        if (!document.hasFocus() && e.key === 'change-event') {
          console.log('do some business');
        }
      };
    </script>
  </head>

  <body>
    <button onclick="saveTo()">click</button>
  </body>
</html>

三、自定义storage事件

3.1 如何自定义事件？

// e 代表触发的事件对象
window.addEventListener("huangbiao", function (e) {
    console.log(arguments);
    debugger
    if (e.myAttr === "demo") {
        alert("key值为demo，添加成功！")
    }
}, false)
// 创建一个事件对象，名字为 huangbiao
let hbEventObj = new Event("huangbiao")
// 给事件对象添加一个属性，叫做 myAttr
hbEventObj.myAttr = "demo"
// 触发事件
window.dispatchEvent(hbEventObj)

3.2 自定义添加localstorage事件监听

// 缓存原来“保存数据”方法对象
var orignalSetItem = localStorage.setItem;
// 覆盖原来“保存数据”的方法
localStorage.setItem = function(key,newValue){
    // 创建一个自定义事件对象，名字为 setItemEvent
    var setItemEvent = new Event("setItemEvent");
    // 给事件添加属性
    setItemEvent.newValue = newValue;
    // 触发事件
    window.dispatchEvent(setItemEvent);
    // 触发原来的 localStorage存储 数据的方法,这个是关键，不能使用 localStorage.setItem方法，否则死循环，会内存溢出的
    orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
    alert(e.newValue);
});
localStorage.setItem("name","wang");

触发原来的 localStorage存储数据的方法,这个是关键，不能使用 localStorage.setItem方法，否则死循环，会内存溢出的

3.3 自定义监听删除localstorage 事件

var orignalremoveItem = localStorage.removeItem;
localStorage.removeItem = function(key,newValue){
	var removeItemEvent = new Event("removeItemEvent");
	removeItemEvent.key = key;
	window.dispatchEvent(removeItemEvent);
	orignalremoveItem.apply(this,arguments);
};
window.addEventListener("removeItemEvent", function (e) {
	if(localStorage.getItem("demo")){
		if(e.key=='demo'){
			alert("key值为demo，删除成功");
		}
	}else{
		alert("本地数据无key值为demo")
	}
}