涉及面试题:有几种方式可以实现存储功能,分别有什么优缺点?什么是 Service Worker ?
cookie,localStorage,sessionStorage,indexDB
特性 | cookie | localStorage | sessionStorage | indexDB |
---|---|---|---|---|
数据生命周期 | 一般由服务器生成,可以设置过期时间 | 除非被清理,否则一直存在 | 页面关闭就清理 | 除非被清理,否则⼀直存在 |
数据存储大小 | 4K | 5M | 5M | 无限 |
与服务端通信 | 每次都会携带在 header 中,对于请求性能影响 | 不参与 | 不参与 | 不参与 |
从上表可以看到,cookie
已经不建议用于存储。如果没有大量数据存储需求的话,可以使用 localStorage
和 sessionStorage
。
对于不怎么改变的数据尽量使用 localStorage
存储,否则可以用 sessionStorage
存储 。
对于 cookie
来说,我们还需要注意安全性。
属性 | 作⽤ |
---|---|
value |
如果用于保存用户登录态,应该将该值加密,不能使用明文的用户标识 |
http-only |
不能通过 JS 访问 Cookie ,减少 XSS 攻击 |
secure |
只能在协议为 HTTPS 的请求中携带 |
same-site |
规定浏览器不能在跨域请求中携带 Cookie ,减少 CSRF 攻击 |
Service Worker
Service Worker
是运行在浏览器背后的独立线程,⼀般可以用来实现缓存功能。
使用Service Worker
的话,传输协议必须为HTTPS
。因为Service Worker
中涉及到请求拦截,所以必须使用HTTPS
协议来保障安全。Service Worker
实现缓存功能⼀般分为三个步骤:
首先需要先注册Service Worker
,
然后监听到install
事件以后就可以缓存需要的文件,
那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存,存在缓存的话就可以直接读取缓存文件,否则就去请求数据。
以下是这个步骤的实现:
// index.js
if (navigator.serviceWorker) {
navigator.serviceWorker
.register('sw.js')
.then(function(registration) {
console.log('service worker 注册成功')
})
.catch(function(err) {
console.log('servcie worker 注册失败')
})
}
// sw.js
// 监听 `install` 事件,回调中缓存所需⽂件
self.addEventListener('install', e => {
e.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll(['./index.html', './index.js'])
})
)
})
// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接⽤缓存,否则去请求数据
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(function(response) {
if (response) {
return response
}
console.log('fetch source')
})
)
})
- 打开页面,可以在开发者工具中的
Application
看到Service Worker
已经启动了。 - 在
Cache
中也可以发现我们所需的文件已被缓存。 - 当我们重新刷新页面可以发现我们缓存的数据是从
Service Worker
中读取的。
涉及面试题:有几种方式可以实现存储功能,分别有什么优缺点?什么是 Service Worker ?的更多相关文章
- 替换__thread的一种方式,实现TLS功能
TLS是由于多线程编程带来的产物,主要是为了解决线程资源局部化,具体内容网上有很多介绍.有很多地方已经支持了该功能,但有些地方没有,下面是GCC的一些介绍,反正具体看实际使用情况: 5.51 Thre ...
- 创建servlet的三种方式
第一种方式,实现Servlet接口 package com.example.servlet; import java.io.IOException; import javax.servlet.Serv ...
- SpringCloud系列-整合Hystrix的两种方式
Hystrix [hɪst'rɪks],中文含义是豪猪,因其背上长满棘刺,从而拥有了自我保护的能力.本文所说的Hystrix是Netflix开源的一款容错框架,同样具有自我保护能力. 本文目录 一.H ...
- java生成二维码的几种方式
1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...
- php开发面试题---数据库SQL调优的几种方式
php开发面试题---数据库SQL调优的几种方式 一.总结 一句话总结: 创建索引:尽量避免使用or或者like,或者sql中的正则 存储查询中间结果 可以加sphinx搜索技术 查询优化 主从数据库 ...
- Java创建线程的第二种方式:实现runable接口
/*需求:简单的卖票程序多个窗口买票 创建线程的第二种方式:实现runable接口 *//*步骤1.定义类实现Runable接口2.覆盖Runable接口中的run方法 将线程要运行的代码存放在 ...
- 三种方式上传文件-Java
前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...
- &和&&的共同点和区别、Java字符含义和Java创建对象的几种方式
一.&和&&的共同点和区别 1.&和&&的联系(共同点): &和&&都可以用作逻辑与运算符,但是要看使用时的具体条件来决定. 操 ...
- python 全栈开发,Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)
昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...
- Java中有两种实现多线程的方式以及两种方式之间的区别
看到一个面试题.问两种实现多线程的方法.没事去网上找了找答案. 网上流传很广的是一个网上售票系统讲解.转发过来.已经不知道原文到底是出自哪里了. Java中有两种实现多线程的方式.一是直接继承Thre ...
随机推荐
- springboot修改默认端口
方案一: src/main/resuorces 文件夹下新建application.properties 文件 并添加内容server.port=8011即可 方案二: 使用EmbeddedServl ...
- mysqld 打开连接卡
把client的ip写在mysql服务器的/etc/hosts文件里 echo [ip] [hostname] >>/etc/hosts
- <魔域之书> Roguebook 存档修改器
魔域之书 这个多周目游戏还挺不错的,游戏是Unity3d做的,网上没有找到现成的修改器,自己用CE修改的话,由于是基于虚拟机的游戏,在Dnsyp中看了,源码,游戏数据都存在不同的 Observable ...
- Spring系列之字段格式化-13
字段格式化 Spring 3 引入了一个方便的SPI,它为客户端环境的实现Formatter提供了一个简单而健壮的替代方 Formatter Formatter实现字段格式化逻辑的SPI . pack ...
- 学习 vue框架
new watch 监听值的变化 watch: { "input1": { handler(newName, old ...
- jetson nano 2gb相关问题
1.create_ap不能根据address设置带设备号的wifi热点 sudo nohup create_ap wlan0 eth0 ZL_Jetson_WIFI-$(sudo cat /sys/c ...
- LOJ数列分块入门九题(中)
#6281. 数列分块入门 5 - 题目 - LibreOJ (loj.ac) 区间开方,区间求和题. 显然,针对区间维护开方操作很难做到,于是考虑其值的性质,显然,int范围内的值最多开方6次就会变 ...
- 新安装的eclipse没有新建java project----解决方法:安装插件
问题描述:最近新安装的一个eclipse版本,建立新工程的时候发现没有java project选项,如下: 百度了一些资料:https://blog.csdn.net/sinat_41752599/a ...
- FII-PRX100-D开发板FPGA的烧录和RISC-V 软件代码下载
1. 生成*.bit文件之前先RESET结果 首先,打开Vivado FII_RISCV_V2.01工程(这里以V2.01版本为例),如图1所示. 图1 FII_RISCV_V2.01工程 要生成相应 ...
- Android 自定义View (二)
一.前言 上节 通过一个简单的旋转环对自定义view作了一个基本的认识,本文将大致讲解下实现的思路以及对该view的一些可能的改进. 二.思路 主要通过重写 view 中的 onDraw() 方法,利 ...