Stockage local et stockage de session en JavaScript

Supposons que vous créiez une application Web dans laquelle les utilisateurs peuvent consommer des médias tels que du texte ou des images. Vous souhaitez leur permettre d'écrire du texte qui sera accessible même après une actualisation de la page ou un redémarrage du navigateur. Avant l'API Web Storage, vous deviez stocker les informations sur le backend et les recharger côté client en cas de besoin. Si vous souhaitez diffuser des informations sur plusieurs navigateurs ou appareils, c'est toujours la voie à suivre.

Cependant, si vous souhaitez que les informations conservées lors des actualisations de page ou des redémarrages du navigateur soient accessibles uniquement sur le même navigateur, l'API Web Storage est un outil plus approprié.

Il existe deux types d'implémentations de stockage Web appelées localStorage和sessionStorage。正如您可能从名称中猜到的那样，sessionStorage 会保留单个会话的信息，而 localStorage qui conserveront vos données même après le redémarrage de votre navigateur.

Dans ce tutoriel, vous apprendrez toutes les bases de l'API Web Storage et vous comprendrez comment tirer parti du stockage local et du stockage de session à notre avantage.

Différence entre le stockage local et le stockage de session

Avant d'aborder l'API, comprenons les différences fondamentales entre le stockage local et le stockage de session.

1. localStorage 即使浏览器重新启动也不会过期，而 sessionStorage Dure uniquement jusqu'à l'actualisation de la page.
2. localStorage 在具有相同来源的多个选项卡和窗口之间共享。另一方面，对于加载相同网页的每个选项卡，sessionStorage Ce sera différent.

Une seule page Web ou un seul document peut avoir son propre objet localStorage 和 sessionStorage. Ils seront cependant indépendants les uns des autres.

Méthodes et propriétés de stockage Web disponibles

localStorage 和 sessionStorage Cinq méthodes sont disponibles.

Vous pouvez utiliser la méthode setItem(key, value) pour stocker certaines informations sous forme de paires clé/valeur dans un objet de stockage. Si la clé existe déjà, cette méthode mettra à jour sa valeur. Gardez à l'esprit que cette méthode nécessite que les clés et les valeurs soient des chaînes.

Vous pouvez utiliser getItem(key) 方法来检索为特定密钥存储的信息。如果传递的密钥不存在，该方法将返回 null.

Supposons que vous souhaitiez supprimer la clé et sa valeur du stockage à partir de la méthode localStorage 或 sessionStorage 中删除一些信息。在这种情况下，您可以使用 removeItem(key) et transmettre le nom de clé correspondant.

Vous pouvez également utiliser la méthode clear() pour effacer toutes les clés en même temps au lieu de les supprimer une par une du stockage.

Il existe également une méthode key(index) qui accepte un entier comme index clé et renvoie le nom de la clé à cet index spécifique. La chose importante à retenir ici est que l’ordre des clés est défini par l’agent utilisateur.

Enfin, il existe une propriété length que vous pouvez utiliser pour obtenir le nombre d'éléments de données stockés dans un objet de stockage donné.

Vous pouvez utiliser l'attribut length 属性与 key() 方法和 getItem() 方法结合使用来访问 localStorage 或 sessionStorage avec la méthode key() et la méthode getItem() pour accéder à localStorage ou sessionStorage code> > Les valeurs de toutes les clés dans .

Voici quelques exemples d'utilisation de toutes ces méthodes :

/* Save some key-value pairs */
localStorage.setItem("artist", "Monty Shokeen");
localStorage.setItem("website", "tutsplus.com");
localStorage.setItem("font", "Righteous");
localStorage.setItem("stroke_width", "4");
localStorage.setItem("color", "#FF5722");

/* Access stored values */
console.log(localStorage.getItem("color"));
// Outputs: #FF5722

console.log(localStorage.getItem("stroke_width"));
// Outputs: 4

/* Iterate over keys */
for (let i = 0; i < localStorage.length; i++) {
  console.log(`${localStorage.key(i)} : ${localStorage.getItem(localStorage.key(i))}`);
}
/*
stroke_width : 4
font : Righteous
website : tutsplus.com
color : #FF5722
artist : Monty Shokeen
*/

/* Removing keys from storage */
localStorage.removeItem("website"); 
localStorage.getItem("website"); 
// Outputs: null

Applications pratiques du stockage local

Faisons quelque chose de pratique avec toutes les connaissances que nous avons acquises. Nous allons créer une application de dessin simple dans laquelle l'utilisateur pourra enregistrer les données dans un stockage local pour une récupération future.

Notre application de dessin sera très simple. Nous aurons un canevas où l'utilisateur pourra dessiner des cercles concentriques de rayons aléatoires. Les valeurs minimales et maximales du rayon seront déterminées par les champs de saisie qu'elles remplissent. Nous aurons également un bouton pour effacer la toile une fois que nous aurons dessiné trop de cercles. C'est notre marque :

<canvas id="canvas" width="810" height="400"></canvas>
<form>
  <label for="min-rad">Min. Radius</label>
  <input type="number" name="min-rad" id="min-rad" min="4"></input>
  <br>
  <label for="max-rad">Max. Radius</label>
  <input type="number" name="max-rad" id="max-rad" min="20"></input>
  <br>
  <button type="button" id="clear">Clear Canvas</button>
</form>

Nous stockerons trois informations dans le stockage local : le rayon minimum, le rayon maximum et l'état de la toile. N'oubliez pas que le stockage local ne peut stocker des informations que sous forme de chaînes. Les valeurs des champs de saisie peuvent être automatiquement converties en chaînes. Cependant, nous devons obtenir le statut du canevas sous forme de chaîne en utilisant la méthode toDataURL(). Cette méthode renvoie une chaîne contenant l'URL des données demandées.

Nous attacherons un écouteur d'événement à tous les éléments de la page : l'écouteur d'événement mousedown 事件侦听器、输入元素的 change 事件侦听器以及按钮的 click du canevas. Commençons par du code d'initialisation et des écouteurs d'événements pour les champs du formulaire.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const minElem = document.querySelector("input#min-rad");
const maxElem = document.querySelector("input#max-rad");
const clearBtn = document.querySelector("button#clear");

let min_radius = 10;
let max_radius = 30;

minElem.addEventListener("change", function(event) {
  min_radius = parseInt(event.target.value);
  localStorage.setItem("min-radius", min_radius);
});

maxElem.addEventListener("change", function(event) {
  max_radius = parseInt(event.target.value);
  localStorage.setItem("max-radius", max_radius);
});

clearBtn.addEventListener("click", function(event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  let image_data = canvas.toDataURL();
  localStorage.setItem("image-data", image_data);
});

默认情况下，我们将最小和最大半径值分别设置为 10 和 30 像素。最小和最大半径输入字段的更改事件侦听器将解析输入的值，然后将这些值存储在本地存储中。

在按钮的单击事件侦听器回调中，我们首先清除画布，然后使用 toDataUrl() 方法将此清除状态保存到本地存储。

这是在画布上侦听 mousedown 事件的代码。

canvas.addEventListener('mousedown', function(event) {
    const canvas_rect = event.target.getBoundingClientRect();
    const pos_x = event.clientX - canvas_rect.left;
    const pos_y = event.clientY - canvas_rect.top;
  
    for(let i = 0; i < 10; i++) {
      let radius = min_radius + Math.floor(Math.random()*(max_radius - min_radius));
      ctx.beginPath();
      ctx.arc(pos_x, pos_y, radius, 0, 2 * Math.PI);
      ctx.stroke();
    }
  
    let image_data = canvas.toDataURL();
    localStorage.setItem("image-data", image_data);
});

让我们来分解一下。我们首先计算用户在画布上单击的确切位置。这是通过从单击位置的 x 坐标减去画布边界矩形的 left 属性的值来确定的。我们做同样的事情来获取点击的垂直位置。

之后，我们创建一个 for 循环，在画布上绘制十个同心圆。半径设置为受最小和最大约束的随机值。最后，就像按钮的点击监听器一样，我们将画布状态保存在本地存储中。每次点击都会发生这种情况，以便我们能够及时了解最新的画布状态。

现在我们唯一要做的就是从本地存储中恢复值以供重新加载或重新启动时使用。我们使用以下代码来完成此操作：

window.addEventListener("DOMContentLoaded", (event) => {
  if (localStorage.getItem("image-data")) {
    var img = new Image();
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
    };
    img.src = localStorage.getItem("image-data");
  }

  if (localStorage.getItem("min-radius")) {
    min_radius = parseInt(localStorage.getItem("min-radius"));
  }

  if (localStorage.getItem("max-radius")) {
    max_radius = parseInt(localStorage.getItem("max-radius"));
  }

  minElem.value = min_radius;
  maxElem.value = max_radius;
});

这里最复杂的部分是将图像数据从本地存储恢复到画布。为此，我们首先创建 HTMLImageElement 的新实例，然后侦听其 onload 事件，以便在画布上绘制加载的图像。

以下 CodePen 演示将向您展示我们的绘图应用程序的实际运行情况。首先尝试单击画布绘制一些圆圈或将半径设置为您喜欢的值。

现在，我们在教程中使用localStorage，这意味着即使浏览器重新启动我们的数据也将是安全的。您可以尝试将其替换为 sessionStorage 以仅在页面刷新期间保留信息。

最终想法

在本教程中，我们介绍了 JavaScript 中 localStorage 和 sessionStorage 的基础知识。您现在应该能够使用 Web Storage API 在浏览器存储中存储和检索信息。正如我们在此处创建绘图应用程序时看到的那样，该 API 有很多应用程序。您还可以使用它在本地文本编辑器中实现内容保存功能。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!