sessionStorage会话存储和localStorage本地存储

storage存储

sessionStorage会话存储和localStorage本地存储

sessionStorage会话存储

特点：

1. 只在当次会话(生命周期)生效
2. 存储大小 5M
3. 内存

方法：

sessionStorage是window下面的属性，window可省略

sessionStorage.setItem() 设置项

sessionStorage.getItem() 获取项

sessionStorage.removeItem() 移除项

sessionStorage.clear() 清除所有

//设置项
window.sessionStorage.setItem("name", "小红");
window.sessionStorage.setItem("age", 11);
//获取项
console.log(window.sessionStorage.getItem("name"));
//移除项
window.sessionStorage.removeItem("age");
//清除所有
window.sessionStorage.clear();

localStorage本地存储

与sessionStorage的区别： sessionStorage只在当次会话生效，localStorage永久性的

特点：

1. 本地可持续化存储
2. 20m存储空间
3. 同域名下可访问
4. localStorage只有在主动清除才可以擦除 [硬盘]

方法：

localStorage是window下面的属性，window可省略

localStorage.setItem() 设置项

localStorage.getItem() 获取项

localStorage.removeItem() 移除项

localStorage.clear() 清除所有

//设置项
window.localStorage.setItem("name", "小红");
window.localStorage.setItem("age", 11);
//获取项
console.log(window.localStorage.getItem("name")); //小红
//移除项
window.localStorage.removeItem("age");
//清除所有
window.localStorage.clear();

页面生命周期及事件

页面状态监听

window对象提供给我们可以监听页面当前状态事件 : onload、onpageshow、onpagehide、onbeforeunload、onunload 浏览器跳转、关闭、刷新时都按beforeunload,pagehide,unload,load,pageshow的顺序执行

	window.location.url = 'http://www.baidu.com'　　
// 页面跳转之前执行了beforeunload事件
    window.onbeforeunload = function () {
        localStorage.setItem('beforeunload', 'check');
        return false;
    }
    // 页面隐藏的时候执行了pagehide事件
    window.onpagehide = function () {
         localStorage.setItem('pagehide', 'check')
    }
    // 当用户离开页面时触发了unload事件
    window.onunload = function () {
        localStorage.setItem('unload', 'check')
    }
    // 页面完成加载时执行了load事件
    window.onload = function () {
        localStorage.setItem('load', 'check')
    }
    // 页面显示的时候执行了pageshow事件
    window.onpageshow = function () {
        localStorage.setItem('pageshow', 'check')
    }

有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件

• pagehide
• beforeunload
• unload

属性

document.visibilityState

API 主要在document对象上，新增了一个document.visibilityState属性。该属性返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。

hidden：页面彻底不可见。
visible：页面至少一部分可见。
prerender：页面即将或正在渲染，处于不可见状态。

事件

isibilitychange

只要document.visibilityState属性发生变化，就会触发visibilitychange事件。因此，可以通过监听这个事件（通过document.addEventListener()方法或document.onvisibilitychange属性），跟踪页面可见性的变化。

document.addEventListener('visibilitychange', function () {
    if (document.visibilityState == 'hidden') {
        document.title = '页面不可见';
    } else {
        document.title = '页面可见';
    }
});

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '页面不可见';
    }
    else {
        document.title = '页面可见';
    }
});

onblur && onfocus

在你浏览其他窗口页面、或是浏览器最小化、又或是点击了其他程序等等，都算是浏览器窗口失去焦点，那么 window.onblur 事件就会触发。

当你浏览别的窗口或者别的程序,直接点就是当你的窗口失去焦点的时候，就会触发window.onblur

当你的页面获得焦点的时候一样也会触发window.onfocus

window.onblur = function () {
    document.title = "页面失去焦点";
}

window.onfocus = function () {
    document.title = "页面聚焦";
}