chrome-devtools > Application

Posted on 2023-11-22

Application > Manifest

清单窗格。

:sunflower:作用：

当你希望用户能够将该引用程序添加到Mac OS上的“应用程序”文件夹、Windows上的“开始”菜单以及Android和IOS上的主屏幕时，需要一个Web应用程序清单。设置应用程序清单后，可以打开devtools中的Manifest中检验配置是否正确。

:sunflower:编写Web应用程序清单：

清单文件可采用任何名称，但通常命名为 manifest.json，并从根目录（网站的顶级目录）提供。该规范建议该扩展项应为 .webmanifest，但浏览器也支持 .json 扩展项。

创建清单后，将 <link> 标记添加到渐进式 Web 应用的所有页面。例如：

1	<link rel="manifest" href="/manifest.json">

具体的Manifest编写规则和配置项如下：https://web.dev/articles/add-manifest?hl=zh-cn

Application > Service Worker

Service Worker 窗格。

在该位置我们对Service Worker进行检查和调试

:sunflower:Service Worker ：

本质上充当位于 Web 应用程序、浏览器和网络（如果可用）之间的代理服务器。除其他外，它们的目的是创建有效的离线体验、拦截网络请求并根据网络是否可用采取适当的操作，以及更新服务器上的资产。它们还允许访问推送通知和后台同步 API。

:sunflower:特性：

没有DOM访问权限
无法动态导入JS模块，如果在Service Worker全局范围内调用import().则会抛出异常，但允许使用import语句进行静态导入
Service Worker被设计为完全异步，在与主JavaScript不同的线程上运行，因此它是非阻塞的，所以同步XHR和Web Storage等API无法在Service Worker内部进行使用
仅允许通过HTTPS运行

具体编写Service Worker参考如下：https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Application > LocalStorage

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

:hatched_chick:localStorage 的优势

1、localStorage 拓展了 cookie 的 4K 限制。
2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

:hatched_chick:localStorage 的局限

1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
3、localStorage在浏览器的隐私模式下面是不可读取的。
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5、localStorage不能被爬虫抓取到。

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

:japanese_ogre:不可以设置过期时间不可以设置过期时间，但是开发者可以自己判断时间然后把它移除，但是它本身是没有设置过期时间的这个操作的

:hatched_chick:人工设置过期时间

其实都是set方法多传个过期时间啦

ES5扩展Storage

思路很简单，存储的值加一个时间戳，下次取值时验证时间戳。
注意： localStorage只能存储字符，存入时将对象转为json字符串,读取时也要解析

Storage.prototype.setExpire = (key, value, expire) => {
	let obj = {
	data: value,
	time: Date.now(),
	expire: expire
	};
	//localStorage 设置的值不能为对象,转为json字符串
	localStorage.setItem(key, JSON.stringify(obj));
}

Storage.prototype.getExpire = key => {
    let val = localStorage.getItem(key);
    if (!val) {
        return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

ES6拓展Storage

class Storage {

    constructor(props) {
        this.props = props || {}
        this.source = this.props.source || window.localStorage
        this.initRun();
    }
    initRun(){
        /*
        * set 存储方法
        * @ param {String}     key 键
        * @ param {String}     value 值，存储的值可能是数组/对象，不能直接存储，需要转换 JSON.stringify
        * @ param {String}     expired 过期时间，以分钟为单位
        */
        const reg = new RegExp("__expires__");
        let data = this.source;
        let list = Object.keys(data);
        if(list.length > 0){
            list.map((key,v)=>{
                if( !reg.test(key )){
                    let now = Date.now();
                    let expires = data[`${key}__expires__`]||Date.now+1;
                    if (now >= expires ) {
                        this.remove(key);
                    };
                };
                return key;
            });
        };
    }

	set(key, value, expired) {
	    /*
	    * set 存储方法
	    * @ param {String}     key 键
	    * @ param {String}     value 值，
	    * @ param {String}     expired 过期时间，以毫秒为单位，非必须
	    */
	    let source = this.source;
	    source[key] = JSON.stringify(value);
	    if (expired){
	        source[`${key}__expires__`] = Date.now() + expired
	    };
	    return value;
	}

    get(key) {
        /*
        * get 获取方法
        * @ param {String}     key 键
        * @ param {String}     expired 存储时为非必须字段，所以有可能取不到，默认为 Date.now+1
        */
        const source = this.source,
        expired = source[`${key}__expires__`]||Date.now+1;
        const now = Date.now();
    
        if ( now >= expired ) {
            this.remove(key);
            return;
        }
        const value = source[key] ? JSON.parse(source[key]) : source[key];
        return value;
	}

	remove(key) {
	    const data = this.source,
	        value = data[key];
	    delete data[key];
	    delete data[`${key}__expires__`];
	    return value;
	}

}

:hatched_chick:存取格式

localStorage 只支持 string 类型的存储，存入数字取出来的类型也是字符串

需要存入对象时先使用Json.stringify转换为json字符串，取出之后再转换为对象

var storage=window.localStorage;
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

:hatched_chick:增删改查

localStorage.setItem("key", "value");
var lastname = localStorage.getItem("key");
localStorage.removeItem("key");//删除某个键值对
localStorage.clear()//删除所有localStorage

Application > SessionStorage

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

:ant:存取格式

和localStorage相同

:ant:增删改查

sessionStorage.setItem("key", "value");
var lastname = sessionStorage.getItem("key");
sessionStorage.removeItem("key");
sessionStorage.clear();

Application > IndexDB&WebSql

这两者主要用在前端有大容量存储的页面上，例如，在线编辑浏览器或者网页邮箱

	介绍	容量	状态
WebSql	关系型数据库	大小限制因浏览器而异，但一般为5MB-50MB的范围	被W3C标准废弃
IndexDB	非关系型数据库	存储大小是250m以上（受计算机硬件和浏览器厂商的限制）	正常使用