web 浏览器缓存需要前端设置么

发布网友发布时间：2022-04-24 17:47

共4个回答

懂视网时间：2022-04-20 13:23

本篇文章给大家带来的内容是关于web前端如何更新缓存？单例模式封装opendatabase ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

如果不了解opendatabase数据库的操作的各位，建议先学上一篇《web前端缓存之四opendatabase》后，再来看这一篇的内容，本章内容也是前端缓存系列的最后一遍，对opendatabase数据库的一个简单的封装，当然对于具有java基础的童鞋们，可以忽略此篇文章。

好了，废话不多说，直接直奔主题，请看正文吧（还是基于上一篇的实例来写的）：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<!--
openDatabase与android里面的sqlite差不多
最好的选型存储
-->

<h1>opendatabse数据库操作</h1>

<button id="btn-create">创建user数据表</button>
<button id="btn-insert">插入数据</button>
<button id="btn-query">查询数据</button>
<button id="btn-update">修改数据</button>
<button id="btn-delete">删除数据</button>
<button id="btn-drop">删除user数据表</button>

<script type="text/javascript">

 let findId = id => document.getElementById(id);

 //模拟一条user数据
 let user = {
 username: "liuqiang",
 password: "123569874",
 info: "beaconApp开发团队中一员"
 };

 /**
 * 创建数据库 或者此数据库已经存在 那么就是打开数据库
 * name: 数据库名称
 * version: 版本号
 * displayName: 对数据库的描述
 * estimatedSize: 设置数据的大小
 * creationCallback: 回调函数(可省略)
 */
 let db = openDatabase("MySql", "1.0", "我的数据库描述", 1024 * 1024);
 let result = db ? "数据库创建成功" : "数据库创建失败";
 console.log(result);


 const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
 "password varchar(16),info text)";

 const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";

 const QUERY_USER_SQL = "select * from userTable";

 const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";

 const DELETE_USER_SQL = "delete from userTable where username = ?";

 const DROP_USER_SQL = "drop table userTable";

 /**
 * 封装数据库工具类
 */
 class DatabaseUtil {
 /**
  * 构造方法
  * @param sqlSentence 数据库语句
  * @param params 数据库操作的参数
  */
 constructor(sqlSentence, ...params) {
  this.sqlSentence = sqlSentence;
  this.params = params;
 }

 //获取当前实例
 static getInstance(sqlSentence, ...params) {
  return new DatabaseUtil(sqlSentence, ...params)
 }

 /**
  * 执行数据库操作
  * @param callback 成功的回调
  * @param errorCallback 失败的回调
  */
 execute(callback, errorCallback) {
  db.transaction(tx => {
  tx.executeSql(this.sqlSentence, this.params, callback, errorCallback)
  })
 }
 }

 /**
 * 点击事件 增删查改
 */
 let btnCreate = findId("btn-create");
 let btnInsert = findId("btn-insert");
 let btnQuery = findId("btn-query");
 let btnUpdate = findId("btn-update");
 let btnDelete = findId("btn-delete");
 let btnDrop = findId("btn-drop");
 //创建数据表
 btnCreate.onclick = () => DatabaseUtil.getInstance(USER_TABLE_SQL)
 .execute(function (transaction, resultSet) {
  alert('创建user表成功:' + result);
 }, function (transaction, error) {
  alert('创建user表失败:' + error.message);
 });
 //插入数据
 btnInsert.onclick = () => DatabaseUtil.getInstance(INSERT_USER_SQL, user.username, user.password, user.info)
 .execute(function (transaction, resultSet) {
  alert("添加数据成功")
 }, function (transaction, error) {
  alert("添加数据失败:" + error.message)
 });
 //查询数据
 btnQuery.onclick = () => DatabaseUtil.getInstance(QUERY_USER_SQL)
 .execute(function (transaction, resultSet) {
  console.log(resultSet);
 }, function (transaction, error) {
  alert("查询失败:" + error.message)
 });
 //修改数据
 btnUpdate.onclick = () => {
 user.password = "111666666";//修改密码
 DatabaseUtil.getInstance(UPDATE_USER_SQL, user.password, user.username)
  .execute(function (transaction, resultSet) {
  alert("修改数据成功")
  }, function (transaction, error) {
  alert("修改数据失败:" + error.message)
  })
 };
 //删除数据
 btnDelete.onclick = () => DatabaseUtil.getInstance(DELETE_USER_SQL, user.username)
 .execute(function (transaction, resultSet) {
  alert("删除数据成功")
 }, function (transaction, error) {
  alert("删除数据失败:" + error.message)
 });
 //删除数据表
 btnDrop.onclick = () => DatabaseUtil.getInstance(DROP_USER_SQL)
 .execute(function (transaction, resultSet) {
  alert("删除数据表成功")
 }, function (transaction, error) {
  alert("删除数据表失败:" + error.message)
 });

</script>
</body>
</html>

热心网友时间：2022-04-20 10:31

　　缓存的概念
　　缓存这个东西真的是无处不在，有浏览器端的缓存，有服务器端的缓存，有代理服务器的缓存，有ASP.NET页面缓存，对象缓存。数据库也有缓存，等等。
　　http中具有缓存功能的是浏览器缓存，以及缓存代理服务器。
　　http缓存的是指:当Web请求抵达缓存时，如果本地有“已缓存的”副本，就可以从本地存储设备而不是从原始服务器中提取这个文档。
　　缓存的好处
　　缓存的好处是显而易见的，好处有，
　　1. 减少了冗余的数据传输，节省了网费。
　　2. 减少了服务器的负担，大大提高了网站的性能
　　3. 加快了客户端加载网页的速度
　　Fiddler可以方便地查看缓存的header
　　Fiddler中把header都分门别类的放在一起，这样方便查看。
　　HTTP缓存是如何实现
　　如何判断缓存新鲜度
　　Web服务器通过2种方式来判断浏览器缓存是否是最新的。
　　第一种，浏览器把缓存文件的最后修改时间通过 header ”If-Modified-Since“来告诉Web服务器。
　　第二种，浏览器把缓存文件的ETag, 通过header "If-None-Match", 来告诉Web服务器。
　　通过最后修改时间, 来判断缓存新鲜度
　　1. 浏览器客户端想请求一个文档，首先检查本地缓存，发现存在这个文档的缓存，获取缓存中文档的最后修改时间，通过： If-Modified-Since，发送Request给Web服务器。
　　2. Web服务器收到Request，将服务器的文档修改时间（Last-Modified）: 跟request header 中的，If-Modified-Since相比较，如果时间是一样的，说明缓存还是最新的， Web服务器将发送304 Not Modified给浏览器客户端，告诉客户端直接使用缓存里的版本。

热心网友时间：2022-04-20 11:49

浏览器缓存可以由前端设置，但大多数是服务端设置
前端设置缓存通过html文件的meta标签设置相应的缓存时间、过期时间等
但大多数情况下都是服务端返回的响应头中设置这些参数

热心网友时间：2022-04-20 13:23

缓存的概念
缓存这个东西真的是无处不在，有浏览器端的缓存，有服务器端的缓存，有代理服务器的缓存，有ASP.NET页面缓存，对象缓存。数据库也有缓存，等等。
http中具有缓存功能的是浏览器缓存，以及缓存代理服务器。
http缓存的是指:当Web请求抵达缓存时，如果本地有“已缓存的”副本，就可以从本地存储设备而不是从原始服务器中提取这个文档。
缓存的好处
缓存的好处是显而易见的，好处有，
1. 减少了冗余的数据传输，节省了网费。
2. 减少了服务器的负担，大大提高了网站的性能
3. 加快了客户端加载网页的速度
Fiddler可以方便地查看缓存的header
Fiddler中把header都分门别类的放在一起，这样方便查看。
HTTP缓存是如何实现
如何判断缓存新鲜度
Web服务器通过2种方式来判断浏览器缓存是否是最新的。
第一种，浏览器把缓存文件的最后修改时间通过 header ”If-Modified-Since“来告诉Web服务器。
第二种，浏览器把缓存文件的ETag, 通过header "If-None-Match", 来告诉Web服务器。
通过最后修改时间, 来判断缓存新鲜度
1. 浏览器客户端想请求一个文档，首先检查本地缓存，发现存在这个文档的缓存，获取缓存中文档的最后修改时间，通过： If-Modified-Since，发送Request给Web服务器。
2. Web服务器收到Request，将服务器的文档修改时间（Last-Modified）: 跟request header 中的，If-Modified-Since相比较，如果时间是一样的，说明缓存还是最新的， Web服务器将发送304 Not Modified给浏览器客户端，告诉客户端直接使用缓存里的版本。

关于前端缓存相关的cache-contro到底怎么写?

前端与前端缓存的配置并无直接关联，浏览器是否进行缓存取决于服务端的响应头设置，而非前端部分。因此，关于`cache-control`的设置，与前端开发关系不大。若项目中遇到如下问题：一、版本更新时不考虑向前兼容性；二、前端资源的缓存机制对前端团队来说不够透明，即资源缓存不更新导致用户访问时出现404错误...

web前端缓存机制

浏览器可以将用户请求的资源进行缓存，存放在本地。浏览器缓存一般通过请求头来设置。与浏览器缓存有关的头部有：浏览器会将服务器的域名与IP地址的映射缓存在本地，这样用户在访问网站时，不用每次都去查询DNS映射表。在浏览器和服务器之间架设的一个服务器，这个代理服务器会帮助浏览器去请求页面，然...

怎么在前端页面设置不让浏览器缓存?

HTTP1.0中通过Pragma控制页面缓存，可以设置：Pragma或no-cache。网上有非常多的文章说明如何控制不让浏览器或中间缓存服务器缓存页面，通常设置的值为no-cache，不过这个值不这么保险，通常还加上Expires置为0来达到目的。但是如我们刻意需要浏览器或缓存服务器缓存住我们的页面这个值则要设置为Pragma。HTTP...

前端知识|浏览器缓存篇

这样，当用户再次访问相同页面时，浏览器可以直接从缓存加载数据，无需重新从服务器下载。浏览器缓存在前端开发中的作用主要包括优化网页性能和提升用户体验。开发者可以通过设置缓存策略、版本控制和文件指纹技术来控制文件的缓存时间、级别和更新策略，从而实现更好的资源管理。浏览器缓存分为强缓存和协商缓存...

前端部署如何优化静态资源缓存?

前端部署优化静态资源缓存主要通过在前端代码中加入版本号或哈希值以及强制刷新页面来实现。具体步骤如下：每次代码更新时，使用前端代码构建工具（如 webpack）生成新的版本号或哈希值，这会使浏览器自动请求最新的代码。手动指定时，每次更新代码，修改版本号或哈希值。为了防止用户停留在旧页面而使用旧版本...

浏览器缓存&前端缓存&http缓存方式详解

常见操作避免缓存：HTML文件可设置meta标签，服务器响应可添加Cache-Control指令，如no-cache或must-revalidate。还可修改If-modified-since或If-none-match，以及在URL后加时间戳，确保私有缓存。max-age=0与no-cache的区别：前者要求客户端在缓存到期时验证，后者则需每次使用前验证。

能用JS或者前端的什么方法实现清除浏览器缓存吗

可以用JS实现清除浏览器缓存，解决方法如下：1、在静态页面也就是以.html，.jsp，.aspx，.php结尾的文件中在<dead>中加入以下代码。2、如果是用ajax异步请求服务器，加上beforeSend代码。3、或者直接将cache设为false，如图。4、再或者是将要请求的服务器的文件，多加一个随机参数，一般为时间戳，...

深入理解浏览器的缓存机制

通过缓存机制，我们可以直接使用缓存而无需发起请求，或者即便发起了请求，后端存储的数据与前端一致时，也无需再传输数据。接下来，我们深入探讨浏览器缓存的机制，包括缓存位置、缓存策略以及如何在实际场景中应用这些策略。从缓存位置来看，主要分为四种类型，它们的优先级依次为 Service Worker、Memory Cache...

web编程开发都有哪些前端缓存?

通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备。对于前端开发者来说，浏览器充当了重要角色。除此外常见的还有各种各样的代理服务器也可以做缓存。当Web请求到达缓存时，缓存从本地副本中提取这个副本内容而不需要经过服务器。这带来了以下优点：缓存减少了冗余的数据传输，节省流量缓存...

面试官:你懂 HTTP 缓存,那说下浏览器强制刷新是怎么实现的?

HTTP缓存是前端面试中的核心概念，通常面试官会提问强缓存和协商缓存的原理。但如果转换问题方向，例如询问浏览器的强制刷新机制如何实现，你能否答出答案呢？强制刷新是确保获取到最新资源的重要方式。网站的缓存策略通常在入口HTML设置为no-cache，以确保每次访问都更新页面内容，而其他资源则设置为强缓存，...

怎么设置浏览器缓存 ie浏览器缓存设置浏览器设置缓存浏览器缓存目录设置在哪里好谷歌浏览器缓存设置大小怎么在浏览器上缓存网页怎么弄浏览器缓存打开浏览器缓存如何缓存浏览器

web 浏览器缓存 需要前端设置么

web 浏览器缓存需要前端设置么