introduction
Dans le développement front-end, le stockage et la mise en cache des données sont une partie très importante. Des stratégies raisonnables de stockage et de mise en cache des données peuvent améliorer la vitesse de chargement et l'expérience utilisateur des pages Web. Cet article présentera certaines stratégies de stockage et de mise en cache de données frontales couramment utilisées et illustrera leur application pratique à l'aide d'un exemple.
1. Stockage local
LocalStorage est une solution de stockage local fournie par HTML5, qui peut stocker des données dans le navigateur sous la forme de paires clé-valeur. Il a les caractéristiques suivantes :
- Stockage permanent : les données ne seront pas perdues en raison de l'actualisation ou de la fermeture de la page.
- Grande capacité : En général, la capacité de LocalStorage est d'environ 5 Mo.
- Ne peut stocker que des chaînes : les objets ou les tableaux doivent être convertis en chaînes pour le stockage et la lecture.
L'exemple de code est le suivant :
// 存储数据
localStorage.setItem('name', 'John');
localStorage.setItem('age', '25');
// 读取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');
2. Stockage de session
Semblable à LocalStorage, SessionStorage est également une solution de stockage local, mais son cycle de vie est lié à la session et les données seront effacées à la fin de la session. Il a les caractéristiques suivantes :
- Stockage au niveau de la session : les données ne sont valides que dans la session en cours et seront effacées après la fermeture de la page ou du navigateur.
- Grande capacité : En général, la capacité de SessionStorage est d'environ 5 Mo.
- Ne peut stocker que des chaînes : les objets ou les tableaux doivent être convertis en chaînes pour le stockage et la lecture.
L'exemple de code est le suivant :
// 存储数据
sessionStorage.setItem('name', 'John');
sessionStorage.setItem('age', '25');
// 读取数据
const name = sessionStorage.getItem('name');
const age = sessionStorage.getItem('age');
3. Base de données indexée
IndexedDB est une solution de stockage local avancée qui peut stocker de grandes quantités de données structurées et prendre en charge des requêtes complexes. Il a les caractéristiques suivantes :
- Fonction de requête puissante : prend en charge les opérations de requête avancées telles que la requête d'index et de plage.
- Grande capacité : En général, la capacité d'IndexedDB n'a pas de limite claire.
- Opération asynchrone : toutes les opérations sont asynchrones et doivent utiliser la fonction Promise ou callback pour traiter le résultat.
L'exemple de code est le suivant :
// 打开数据库
const request = indexedDB.open('myDB', 1);
// 创建对象存储空间
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('users', {
keyPath: 'id' });
objectStore.createIndex('name', 'name', {
unique: false });
};
// 存储数据
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
objectStore.add({
id: 1, name: 'John', age: 25 });
};
// 查询数据
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
const index = objectStore.index('name');
const request = index.get('John');
request.onsuccess = function(event) {
const user = event.target.result;
console.log(user);
};
};
4. Stratégie de mise en cache
En plus du stockage local, le frontal peut également améliorer la vitesse d'accès aux données grâce à des stratégies de mise en cache. Les stratégies de mise en cache couramment utilisées sont :
- Cache fort : contrôlez la période de validité du cache en définissant le champ Cache-Control ou Expires dans l'en-tête de réponse.
- Cache de négociation : la vérification du cache est effectuée en définissant le champ ETag ou Last-Modified dans l'en-tête de réponse, et si la ressource n'a pas changé, renvoie 304 Not Modified.
L'exemple de code est le suivant :
// 强缓存
app.get('/api/data', (req, res) => {
res.setHeader('Cache-Control', 'max-age=3600'); // 缓存有效期为 1 小时
res.send(data);
});
// 协商缓存
app.get('/api/data', (req, res) => {
const lastModified = new Date('2022-01-01');
res.setHeader('Last-Modified', lastModified.toUTCString());
if (req.headers['if-modified-since'] === lastModified.toUTCString()) {
res.sendStatus(304); // 资源未发生变化，返回 304 Not Modified
} else {
res.send(data);
}
});
en conclusion
Les stratégies de stockage et de mise en cache des données frontales jouent un rôle important dans l'amélioration des performances des pages Web et de l'expérience utilisateur. Grâce à une sélection et une utilisation raisonnables de solutions de stockage local (telles que LocalStorage, SessionStorage et IndexedDB) et de stratégies de mise en cache (telles que la mise en cache forte et la mise en cache de négociation), les données peuvent être gérées et utilisées efficacement, ainsi que la vitesse de chargement et les performances de réponse des pages Web. peut être amélioré.