监听浏览器返回事件及Web存储的使用

发表于 | 分类于

1、浏览器返回（上一页）事件的监听及使用技巧分享

下方代码的基本思路如下：
（1）初始化页面时，使用History对象的history.pushState()方法往浏览器历史记录中添加一条浏览记录。
（2）监听popstate事件，并判断地址栏中是否含有哈希标识符（即“#”号）
（3）如果有，判断“#”后面是否为空，如果为空就说明在当前页，因为window.history.pushState('forward', null, '#');最后一个参数只传递了一个“#”号。
（4）经过(2)(3)的判断，基本可以断定历史记录的位置是当前页，接下来就是在判断内书写功能代码。
（5）我在这一步做的事：清除sessionStorage数据,并技巧性的使用history.back();解决需要多点击一次才能回退到上一页的问题（注释掉这一句即可看到效果，请自行体验）。

注：点击前进、后退、使用go()、forward()、back()方法都会触发history.popstate事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 监听浏览器回退事件
backListen: function() {
    //监听hashchange事件
    // window.addEventListener('hashchange', function() {
    //     //为当前导航页附加一个tag
    //     this.history.replaceState('hasHash', '', '');
    // }, false);
    // window.addEventListener('popstate', function(e) {
    //     if (e.state) {
    //         //侦测是用户触发的后退操作, dosomething
    //         //这里刷新当前url
    //         alert('点击了回退按钮！');
    //         this.location.reload();
    //     }
    // }, false);
    if (window.history && window.history.pushState) {
        $(window).on('popstate', function() {
            var hashLocation = location.hash;
            var hashSplit = hashLocation.split("#!/");
            var hashName = hashSplit[1];
            // 回退到上一页（没有哈希值），借助这个中间页来做操作
            if (hashName !== '') {
                var hash = window.location.hash;
                if (hash === '') {
                    // alert('点击了后退按钮');
                    sessionStorage.removeItem("flag");
                    // 强行回退一步，就不用多点一次了😎
                    history.back();
                    console.log(sessionStorage.getItem("flag"));
                }
            }
        });
        // 将含有哈希值的页面，强行插入浏览器历史记录中
        window.history.pushState('forward', null, '#');
    }
},

2、HTML5新技术sessionStorage和localStorage的运用

sessionStorage和localStorage的使用方法是一致的，主要区别是存储的有效期问题。sessionStorage是会话存储，关闭标签页或浏览器数据会自动清除（刷新页面不会清除数据，可以用于解决跨页面数据传递）；localStorage是永久存储，除非手动删除或调用了删除数据的方法，否则会永久存储在用户的设备中。

以下是两个函数，实现了sessionStorage的存储和读取，localStorage的用法是一样的，直接把“sessionStorage”替换成“localStorage”即可。值得注意的是，这两种存储方式，只能存放字符串格式的数据，如果是json（或数组等），存储时必须调用JSON.stringify()进行字符串转换，读取后可以使用JSON.parse()将字符串转换成json数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 存储数据到sessionStorage    
saveToLocal: function() {
    // 对象转成字符串
    var saveLocal = JSON.stringify(schemesDataTemp);
    // 存入sessionStorage
    sessionStorage.setItem("schemeData", saveLocal);
    console.log(schemesDataTemp);
},
// 从sessionStorage获取数据 
getFromLocal: function() {
    // 从sessionStorage读取数据，并转化成json
    var localData = JSON.parse(sessionStorage.getItem("schemeData"));
    return localData;
},

2、Web存储的使用样例(摘自网络)

下面以本地存储（localStorage）为例，会话存储改成 sessionStorage 对象即可。

#####（1）文本数据的保存和读取

1
2
3
localStorage.setItem("user_name","hangge.com");
 
var userName = localStorage.getItem("user_name");

#####（2）数值的保存和读取

1
2
3
localStorage.setItem("user_age",100);
 
var userAge = Number(localStorage.getItem("user_age"));
（3）日期的保存和读取
1
2
3
4
5
6
7
8
9
10
//创建日期对象
var today = new Date();
 
//按照YYY/MM/DD的标准格式把日期转换成文本字符串，然后保存为文本
var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate();
localStorage.setItem("session_started", todayString);
 
//取得日期文本，并基于该文本创建新的日期对象
var newToday = new Date(localStorage.getItem("session_started"));
alert(newToday.getFullYear());
（4）自定义对象的保存和读取

对象的保存和读取可以通过JSON编码转换来实现。
JSON.stringify()：把任何对象连同其数据转换为文本形似。
JSON.parse()：把文本转换回对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//自定义一个User对象
function User(n, a, t) {
    this.name = n;
    this.age = a;
    this.telephone = t;
}
 
//创建User对象
var user = new User("hangge", 100, "123456");
//将其保存为方便的JSON格式
sessionStorage.setItem("user", JSON.stringify(user));
 
//跳转页面
//window.location = "hangge.html";
 
//将JSON文本转回原来的对象
var user2 = JSON.parse(sessionStorage.getItem("user"));
alert(user2.name);
（5）检测某个键的值是否为空，可以直接测试是否等于null
1
2
3
if(localStorage.getItem("user_name") == null){
    alert("用户名不存在！");
}

#####（6）删除数据项

1
localStorage.removeItem("user_name");
（7）清除所有数据
1
localStorage.clear();
（8）查找所有的数据项

不知道键名，可以使用 key() 方法从本地或者会话存储中取得所有的数据项。下面样例，点击按钮后就会列出所有本地存储中的数据。

1
2
3
4
5
6
7
8
9
10
11
12
//遍历所有数据项
  for (var i=0; i<localStorage.length; i++) {
    //取得当前位置数据项的键
    var key = localStorage.key(i);
    //取得以该键保存的数据值
    var item = localStorage.getItem(key);
 
    //用以上数据创建一个列表项添加到页面中
    var newItem = document.createElement("li");
    newItem.innerHTML = key + ": " + item;
    itemList.appendChild(newItem);
  }
(9)响应存储变化

Web存储也为我们提供了在不同浏览器窗口间通信的机制。也就是说在本地存储或会话存储发生变化时，其他查看同一页面或者同一站点中其他页面的窗口就会触发 window.onStorage 事件。
这里说的存储变化，指的是向存储中添加新数据项，修改既有数据项，删除数据项或者清除所有数据。而对存储不产生任何影响的操作（用既有键名保存相同的值，或者清除原本就是空的存储空间），不会引发 onStorage 事件。

page1核心代码

1
2
3
// 在本地存储中保存数据项
// (如果同名键已经存在，则用新值替换旧值)
localStorage.setItem(key, item);

page2核心代码

1
2
3
4
5
window.onload = function() {
    alert(1);
  //给window.onStorage事件添加一个处理函数
  window.addEventListener("storage", storageChanged, false);
};

以上，许久没有更新博客了，说好听是工作繁忙，说难听就是懒！！！书写博客，一来巩固知识，二来方便查阅，有益无害，贵在坚持！