Fatal编程技术网
  • javascript/
  • Javascript 在我的情况下使用什么缓存技术？

Javascript 在我的情况下使用什么缓存技术？

javascript php html

Javascript 在我的情况下使用什么缓存技术？,javascript,php,html,service-worker,Javascript,Php,Html,Service Worker,对于我目前正在构建的简单渐进式web应用程序，我有一个关于最佳脱机缓存技术的问题 简而言之，我正在构建一个药物解释应用程序，用户需要在其中键入条形码，单击“获取药物”，然后用户将被重定向到一个result.php文件，其中包含我从MySQL数据库查询的药物的一些基本信息（条形码是这个简单数据库中的关键） 我现在要做的是实现脱机缓存。因此，当用户第一次输入此条形码并进入结果页面时，我希望与该条形码链接的数据保存在缓存中。下次当此人脱机并在index.html文件中键入相同的条形码并单击“提交”时，

对于我目前正在构建的简单渐进式web应用程序，我有一个关于最佳脱机缓存技术的问题

简而言之，我正在构建一个药物解释应用程序，用户需要在其中键入条形码，单击“获取药物”，然后用户将被重定向到一个result.php文件，其中包含我从MySQL数据库查询的药物的一些基本信息（条形码是这个简单数据库中的关键）

我现在要做的是实现脱机缓存。因此，当用户第一次输入此条形码并进入结果页面时，我希望与该条形码链接的数据保存在缓存中。下次当此人脱机并在index.html文件中键入相同的条形码并单击“提交”时，它应再次将其发送到该结果页并显示先前保存的缓存数据

现在的问题是，我真的不知道什么是最好的缓存技术。我找到了一个网站，上面用一个例子解释了每一种技术如何实现，但我真的不知道该选择什么：

谁能给我一些关于我的情况的建议

这是我拥有的html和php文件（到目前为止一切正常）：


渐进式Web应用程序-MAM11
药丸解说员
请在下面输入药物的欧洲商品编号（EAN）

您可以在药箱的外侧找到EAN，通常以数字8开头，共包含13位数字











渐进式Web应用程序-MAM11
药丸解说员
产品名称：
活性成分：
说明：

我还开始让一个服务工作者至少缓存应用程序外壳（到目前为止也可以运行）。因此，我成功地缓存了所有文件，我只需要数据缓存部分的帮助。

将数据存储在
本地存储中如何


您将
条形码
作为键，并将
字符串化的
数据放在那里。
听起来像是一个有趣的项目

有很多方法可以做到这一点，但我认为下面是最简单的方法。你在中找到了一个很好的资源，他是offline first和PWAs的思想领袖之一，绝对是一个好的追随者

在您的情况下，听起来您应该使用IndexedDB，这是现代浏览器中内置的DB，它允许将大量结构化数据存储在浏览器的缓存中，包括JSON。（）然后您可以扩展您的服务工作者来拦截请求，并在调用后端之前首先检查IndexedDB中的数据。我来自NodeJS背景，因此在PHP世界中可能会略有不同，但我认为以下基本步骤应该是相同的：


  • 第一次调用检索pill X上的数据
    • 

  • 数据在页面上呈现，数据也作为JSON缓存到IndexedDB
    • 

  • 用户再次搜索pill X
    • 

  • 服务人员条目将拦截呼叫，并首先检查是否有用于该搜索的有效IndexedDB，即pill X。
如果存在，则应使用缓存中的数据，如果没有，则应允许完成服务调用
    • 

    我知道这是一个非常简单的答案，但我相信这将是您实现这一目标的基本过程。
    我会说使用indexDB，因为它将有助于您查询和获取性能和开发方面的特定结果
    
您的mysql数据将以JSON的形式从服务器到浏览器（如果不是这样做的话，因为我看不出有任何理由不使用它），所以您可以直接保存在indexDB中
    
第二件事是在NoSql数据库中使用indexDB，因此在任何NoSql数据库中存储Mysql（SQL）数据都很容易，因为它们已经结构化，并且NoSql数据库是动态的
    
如果假设使用大量条形码，本地存储将是一个问题，您将存储在本地存储中，因此本地存储大小将增长，现在对于查询，您必须按每个条目进行检查，直到获得请求条形码，但在indexDB中，您可以使用索引
    
Cookie用于跟踪、分析数据等
    
因此，最后使用indexDB
    

    如果您有任何疑问，请随时留下一条注释
    建议-如果您还没有。。。这不是我以前研究过的东西，所以它对我很有用：）我发现越来越多的人建议使用IndexedDB。我将对此进行更多研究，谢谢！我想这会管用的。关于如何使用IndexDB，有很多例子。我只需要找到一种方法，如何在desire页面（在本例中为my.php文件）中显示此DB的结果。到目前为止，我只看到结果显示在浏览器的控制台内。由于indexDB是客户端数据库，php无法工作，只有javascript可以工作。您需要使用javascript编写代码，以便将数据存储在indexDB中，并从indexDB获取数据，然后显示在浏览器上。但不是.php，因为php会在服务器端执行，并通过php解释器将html输出到浏览器。我知道，但我不是说我会使用php将数据存储在indexDB中。我的PHP文件包含一点HTML代码，我想在这些HTML标记（在本例中是我的表单）中显示我在indexDB中存储的任何内容。我该怎么做？找不到这方面的好例子。或者..我应该创建一个新的HTML页面，使用与result.php页面相同的样式和所有内容，该页面将显示indexDB结果。仅当浏览器处于脱机状态时才应触发此页面。这就是你的意思吗？@Toufik，正如你提到的，你的应用程序也应该离线工作，在这种情况下，php不会工作，因为页面不会被缓存。因此，是的，创建一个单独的html文件是一个好主意。在php中，只做处理

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progressive Web Application - MAM11</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" async></script>
</head>
<body>

    <h1>Pill-Explainer</h1>

    <p>Please enter the European Article Number (EAN) of your medication below. <br>
        You can find the EAN at the outside of your medication box often starting with the number 8 and containing 13 digits in total. </p>

    <img src="images/barcode.jpg"> <br>

 <form action="http://192.168.0.104/MedicationProject/result.php" method="post">

     <input type="number" placeholder="Enter barcode" name="barcode" id="barcode"> <br>
     <input type="submit" value="Get medication" id="submit">
 </form>

</body>

    

    <?php 
// 1. database credentials
$host = "sql7.freemysqlhosting.net";
$db_name = "sql7264357";
$username = "sql7264357";
$password = "*********";

// 2. connect to database
$con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);

// 3. get barcode value from inputfield in previous document
$search=$_POST['barcode']; 

// 4. prepare select query
$query = 'SELECT ProductName, ActiveIngredient, Description, Leaflet 
FROM Medications WHERE Barcode = "'.$search.'"';
$stmt = $con->prepare( $query );

// 5. execute our query
$stmt->execute();

// 6. store retrieved row to the 'row' variable
$row = $stmt->fetch(PDO::FETCH_ASSOC);
?> 

    

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progressive Web Application - MAM11</title>
    <link rel="stylesheet" href="styles/result.css">
</head>
<body>

    <h1>Pill-Explainer</h1>     


 <form action="/action_page.php">

     <label>Productname:</label> 
     <textarea type="text" id="productname"><?php echo $row['ProductName']?></textarea>                

     <label>Active ingredient:</label>
     <textarea type="text" id="ingredient"><?php echo $row['ActiveIngredient']?></textarea>

     <label>Description:</label>
     <textarea type="text" id="description"><?php echo $row['Description']?></textarea>

 </form>

<div id="buttons">
    <a href="index.html">
        <img src="images/back-button.jpg">
    </a>

    <a href="<?php echo $row['Leaflet']?>">
        <button type="button">Download leaflet <br> (Internet only)</button>
    </a>
</div>

</body>