JavaScript의 로컬 저장소 및 세션 저장소

사용자가 텍스트나 이미지와 같은 미디어를 사용할 수 있는 웹 애플리케이션을 만들고 있다고 가정해 보겠습니다. 페이지를 새로 고치거나 브라우저를 다시 시작한 후에도 액세스할 수 있는 일부 텍스트를 작성할 수 있도록 허용하려고 합니다. Web Storage API 이전에는 백엔드에 정보를 저장하고 필요할 때 클라이언트 측에서 다시 로드해야 했습니다. 브라우저나 장치 전반에 걸쳐 정보를 제공하려는 경우에도 이 방법을 사용할 수 있습니다.

그러나 페이지를 새로 고치거나 브라우저를 다시 시작해도 유지되는 정보를 동일한 브라우저에서만 액세스할 수 있도록 하려면 Web Storage API가 더 적합한 도구입니다.

브라우저를 다시 시작한 후에도 데이터를 유지하는 localStorage和sessionStorage。正如您可能从名称中猜到的那样，sessionStorage 会保留单个会话的信息，而 localStorage이라는 두 가지 유형의 웹 저장소 구현이 있습니다.

이 튜토리얼에서는 웹 저장소 API의 모든 기본 사항을 배우고 로컬 저장소와 세션 저장소를 활용하는 방법을 이해하게 됩니다.

로컬 저장소와 세션 저장소의 차이점

API를 살펴보기 전에 로컬 저장소와 세션 저장소의 기본적인 차이점을 이해해 보겠습니다.

1. localStorage 即使浏览器重新启动也不会过期，而 sessionStorage 페이지를 새로 고칠 때까지만 지속됩니다.
2. localStorage 在具有相同来源的多个选项卡和窗口之间共享。另一方面，对于加载相同网页的每个选项卡，sessionStorage 다를 겁니다.

단일 웹페이지나 문서에는 자체 localStorage 和 sessionStorage 개체가 있을 수 있습니다. 그러나 그들은 서로 독립적입니다.

사용 가능한 웹 저장 방법 및 속성

localStorage 和 sessionStorage 다섯 가지 방법을 사용할 수 있습니다.

setItem(key, value) 메서드를 사용하여 일부 정보를 키/값 쌍 형식으로 저장소 개체에 저장할 수 있습니다. 키가 이미 존재하는 경우 이 메서드는 해당 값을 업데이트합니다. 이 방법을 사용하려면 키와 값이 모두 문자열이어야 한다는 점을 명심하세요.

getItem(key) 方法来检索为特定密钥存储的信息。如果传递的密钥不存在，该方法将返回 null를 사용할 수 있습니다.

localStorage 或 sessionStorage 中删除一些信息。在这种情况下，您可以使用 removeItem(key) 메소드에서 키와 해당 값을 제거하고 관련 키 이름을 전달한다고 가정해 보겠습니다.

저장소에서 키를 한 번에 하나씩 삭제하는 대신 clear() 방법을 사용하여 모든 키를 한 번에 지울 수도 있습니다.

정수를 키 인덱스로 받아들이고 해당 특정 인덱스의 키 이름을 반환하는 key(index) 메서드도 있습니다. 여기서 기억해야 할 중요한 점은 키의 순서가 사용자 에이전트에 의해 정의된다는 것입니다.

마지막으로, 특정 저장소 개체에 저장된 데이터 항목 수를 가져오는 데 사용할 수 있는 length 속성이 있습니다.

key() 메서드 및 getItem() 메서드와 함께 length 属性与 key() 方法和 getItem() 方法结合使用来访问 localStorage 或 sessionStorage 속성을 사용하여 localStorage 또는 sessionStorage에 액세스할 수 있습니다. code> > 에 있는 모든 키의 값입니다.

다음은 이러한 모든 방법을 사용하는 몇 가지 예입니다.

으아악

로컬 스토리지의 실제 적용

우리가 얻은 모든 지식을 가지고 실용적인 일을 해보자. 사용자가 향후 검색을 위해 데이터를 로컬 저장소에 저장할 수 있는 간단한 그리기 응용 프로그램을 만듭니다.

우리의 그리기 앱은 매우 간단합니다. 사용자가 임의의 반지름으로 구성된 동심원을 그릴 수 있는 캔버스를 갖게 됩니다. 반경의 최소값과 최대값은 채우는 입력 필드에 따라 결정됩니다. 원을 너무 많이 그린 경우 캔버스를 지울 수 있는 버튼도 있습니다. 이것이 우리의 마크입니다:

으아악

로컬 저장소에는 최소 반경, 최대 반경, 캔버스 상태의 세 가지 정보가 저장됩니다. 로컬 저장소는 정보를 문자열로만 저장할 수 있다는 점을 기억하세요. 입력 필드 값을 자동으로 문자열로 변환할 수 있습니다. 하지만 toDataURL() 메서드를 사용하여 캔버스 상태를 문자열로 가져와야 합니다. 이 메소드는 요청된 데이터의 URL이 포함된 문자열을 반환합니다.

페이지의 모든 요소, 즉 캔버스의 mousedown 事件侦听器、输入元素的 change 事件侦听器以及按钮的 click 이벤트 리스너에 이벤트 리스너를 연결합니다. 양식 필드에 대한 일부 초기화 코드와 이벤트 리스너부터 시작해 보겠습니다.

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 有很多应用程序。您还可以使用它在本地文本编辑器中实现内容保存功能。

위 내용은 JavaScript의 로컬 저장소 및 세션 저장소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!