Implementierungsmethode des JS-Front-End-Cache und Einführung in die Eigenschaften von Cookies

Im Front-End-Browser können einige Daten (z. B. Daten im Datenwörterbuch) bei der ersten Anfrage abgerufen und im js-Objekt gespeichert werden, sodass Sie bei Bedarf nicht jedes Mal den Server anfordern müssen die Zukunft. Bei Seiten, die häufig Datenwörterbücher zum Füllen von Dropdown-Feldern verwenden, kann dieser Ansatz die Serverbesuche erheblich reduzieren. Diese Methode funktioniert besonders gut mit Frames, die Iframes verwenden.

Dieser Artikel stellt hauptsächlich die Methode von JS zur Implementierung von Front-End-Caching vor. Ich hoffe, dass er jedem helfen kann.

Spezifische Implementierungsideen und -methoden:

Erstellen Sie eine Cache.js-Datei:

1. Definieren Sie auf der Frontend-Seite, welche Daten vom Frontend abgerufen werden müssen gleichzeitig zwischenspeichern und ein Objekt definieren. So speichern Sie diese Daten:

/**
 * 定义需要在用户登录的时候获取到本地的数据字典类别
 */
var clsCodes = {clsCodes :
    [BOOL,
     STATUS,
     USER_TYPE,
     REPORT_STATUS
   ]
};
 
/**
 * 获取数据字典到本地
 */
var dicts;

2. Definieren Sie auf der Front-End-Seite eine Funktion, um die Hintergrundschnittstelle aufzurufen Erhalten Sie Daten und speichern Sie sie dann in lokalen Cache-Objekten (Dikten).

function getDicts() {
  $.post(getContextPath() + /api/sys/getDictList,
      clsCodes,
      function(resultBean, status, xhRequest) {
        if (resultBean.data != undefined) {
          dicts = resultBean.data;
        }
      }, 
      'json');
}

Rufen Sie diese Methode auf, wenn die Hauptseite geladen wird, um die Daten sofort abzurufen und zwischenzuspeichern. Wenn Sie in Zukunft dieselben Daten benötigen, können Sie diese auf diese Weise direkt aus den lokalen Objektdikten abrufen.

Backend-Controller:

3 Definieren Sie eine Schnittstelle zum Abfragen der Datenbank (oder zum Abfragen des Server-Cache, wie im Beispiel unten), entsprechend der Front-End-Anfrage, um Daten abzurufen und zurückzugeben zum Frontend:

/**
 * 根据多个分类编号获取多个字典集合
 * @param clsCodes
 * @return {{clsCode : {code1:name1,code2:name2...}}, ...}
 */
@SuppressWarnings({ unchecked, rawtypes })
@ResponseBody
@RequestMapping(getDictList)
public ResultBean getDictList(@RequestParam(value = clsCodes[], required = true) String[] clsCodes) {
  ResultBean rb = new ResultBean();
   
  Map<string, string="">> dictCache = (Map<string, string="">>) CacheManager.getInstance().get(CacheConstants.DICT);
  Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序
 
  if(dictCache != null){
    for(String clsCode: clsCodes){
      dictMap.put(clsCode, dictCache.get(clsCode));
    }
  }else{
    rb.setMessage(缓存中拿不到字典信息！);
    rb.setSuccess(false);
  }
 
  rb.setData(dictMap);
  return rb;
}</string,></string,>

1. Eigenschaften von Cookies

1) Die Größe von Cookies ist begrenzt 4 KB und kann keine großen Dateien oder E-Mails akzeptieren.

2) Solange eine Anfrage mit Cookies vorliegt, werden Cookies zwischen dem Server und dem Browser hin und her gesendet (dies erklärt, warum lokale Dateien Cookies nicht testen können). Darüber hinaus werden die Cookie-Daten in der HTTP-Anfrage immer vom gleichen Ursprung übertragen (auch wenn sie nicht benötigt werden), was auch ein wichtiger Grund dafür ist, dass das Cookie nicht zu groß sein darf. Die orthodoxe Cookie-Verteilung wird durch die Erweiterung des HTTP-Protokolls erreicht. Der Server fügt dem HTTP-Antwortheader eine spezielle Befehlszeile hinzu, um den Browser aufzufordern, das entsprechende Cookie gemäß den Anweisungen zu generieren.

3) Jedes Mal, wenn ein Benutzer Serverdaten anfordert, werden zusammen mit diesen Anfragen Cookies an den Server gesendet. Server-Skriptsprachen wie PHP können die von Cookies gesendeten Daten verarbeiten sehr praktisch. Natürlich kann das Front-End auch Cookies generieren, um Cookies zu verwenden. Der Browser stellt nur ein Objekt wie document.cookie bereit, und das Zuweisen und Abrufen von Cookies ist schwieriger. In PHP können wir Cookies über setcookie() setzen und Cookies über das superglobale Array $_COOKIE erhalten.

Der Inhalt von Cookies umfasst hauptsächlich: Name, Wert, Ablaufzeit, Pfad und Domäne. Der Pfad und die Domäne bilden zusammen den Geltungsbereich des Cookies. Wenn die Ablaufzeit nicht festgelegt ist, bedeutet dies, dass die Lebensdauer dieses Cookies während der Browsersitzung beträgt. Wenn das Browserfenster geschlossen wird, verschwindet das Cookie. Diese Art von Cookie, das für die Dauer der Browsersitzung bestehen bleibt, wird als Sitzungscookie bezeichnet. Sitzungscookies werden im Allgemeinen nicht auf der Festplatte, sondern im Speicher gespeichert. Dieses Verhalten ist in der Spezifikation natürlich nicht festgelegt. Wenn eine Ablaufzeit eingestellt ist, speichert der Browser die Cookies auf der Festplatte. Wenn Sie den Browser schließen und erneut öffnen, bleiben diese Cookies weiterhin gültig, bis die eingestellte Ablaufzeit überschritten ist. Auf der Festplatte gespeicherte Cookies können von verschiedenen Browserprozessen gemeinsam genutzt werden, beispielsweise von zwei IE-Fenstern. Verschiedene Browser verfügen über unterschiedliche Verarbeitungsmethoden für im Speicher gespeicherte Cookies.

Verwandte Empfehlungen:

Verwendung von JS zur Implementierung von Front-End-Caching

Das obige ist der detaillierte Inhalt vonImplementierungsmethode des JS-Front-End-Cache und Einführung in die Eigenschaften von Cookies. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!