sessionStorage를 사용하여 데이터를 저장하는 실제 애플리케이션 시나리오 살펴보기

sessionStrage를 사용하여 데이터를 저장하는 실제 시나리오 탐색

소개

웹 애플리케이션이 점점 더 복잡해짐에 따라 다른 페이지에 또는 페이지를 새로 고칠 때 일부 데이터를 저장해야 하는 경우가 많습니다. 이 요구 사항은 브라우저의 sessionStorage를 사용하여 쉽게 달성할 수 있습니다. 이 문서에서는 몇 가지 일반적인 시나리오를 살펴보고 특정 코드 예제를 제공합니다. 독자들이 sessionStorage를 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다.

1. 양식 데이터 저장

많은 응용 프로그램에서는 사용자의 잘못된 조작이나 페이지 새로 고침으로 인한 데이터 손실을 방지하기 위해 사용자가 작성하는 양식 데이터를 저장해야 하는 경우가 많습니다. 이 기능은 sessionStorage를 사용하여 쉽게 구현할 수 있습니다.

다음은 간단한 예입니다. 이름과 나이라는 두 개의 입력 상자가 있는 양식이 있다고 가정합니다. 사용자가 양식을 작성하면 데이터가 sessionStorage에 저장됩니다. 코드는 다음과 같습니다.

// 获取表单元素
const form = document.querySelector('#myForm');
const nameInput = form.querySelector('#name');
const ageInput = form.querySelector('#age');

// 监听表单提交事件
form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  // 获取用户输入的数据
  const name = nameInput.value;
  const age = ageInput.value;
  
  // 存储数据到 sessionStorage
  sessionStorage.setItem('name', name);
  sessionStorage.setItem('age', age);
});

다른 페이지를 추가하거나 현재 페이지를 새로 고친 후 다음 코드를 사용하여 이전에 저장된 양식 데이터를 복원할 수 있습니다.

// 获取保存的数据
const savedName = sessionStorage.getItem('name');
const savedAge = sessionStorage.getItem('age');

// 恢复数据到表单中
nameInput.value = savedName;
ageInput.value = savedAge;

2. 장바구니 데이터 저장

또 다른 일반적인 응용 시나리오는 저장하는 것입니다. 사용자의 장바구니 데이터. 사용자가 웹사이트에서 제품을 구매할 때 제품 정보를 sessionStorage에 저장하여 사용자가 결제 페이지로 이동할 때 이전에 선택한 제품을 볼 수 있도록 할 수 있습니다.

다음은 간단한 예입니다. 사용자가 항목 목록에서 항목을 선택하고 선택한 항목을 장바구니에 추가할 수 있다고 가정합니다. 사용자가 제품을 선택할 때마다 제품 정보를 sessionStorage에 저장합니다. 코드는 다음과 같습니다.

// 获取商品列表元素
const products = document.querySelectorAll('.product');

// 监听商品选择事件
products.forEach(function (product) {
  const btn = product.querySelector('button');
  btn.addEventListener('click', function () {
    // 获取商品信息
    const name = product.querySelector('.name').textContent;
    const price = product.querySelector('.price').textContent;
    
    // 获取购物车数据（如果有）
    const cart = JSON.parse(sessionStorage.getItem('cart')) || [];

    // 添加选择的商品到购物车
    cart.push({ name, price });

    // 更新购物车数据
    sessionStorage.setItem('cart', JSON.stringify(cart));
  });
});

결제 페이지에서 또는 현재 페이지를 새로 고친 후 다음 코드를 사용하여 장바구니 데이터를 가져와 사용자에게 표시할 수 있습니다.

// 获取购物车数据
const cart = JSON.parse(sessionStorage.getItem('cart'));

// 显示购物车数据
cart.forEach(function (item) {
  // 创建 DOM 元素，并显示数据
});

3. 사용자 로그인 상태 저장

마지막 시나리오는 사용자의 로그인 상태를 저장하는 것입니다. 예를 들어, 사용자가 로그인 페이지에 사용자 이름과 비밀번호를 입력한 후 로그인 상태를 sessionStorage에 저장하여 사용자가 웹사이트의 다른 페이지를 탐색하는 동안 로그인 상태를 유지할 수 있습니다.

다음은 간단한 예입니다. 사용자가 로그인 페이지에 성공적으로 로그인한 후 로그인 상태를 sessionStorage에 저장한다고 가정합니다. 코드는 다음과 같습니다.

// 监听登录表单提交事件
const form = document.querySelector('#loginForm');
form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  // 获取用户输入的用户名和密码
  const username = form.querySelector('#username').value;
  const password = form.querySelector('#password').value;
  
  // 模拟登录验证
  const isLoggedIn = checkLogin(username, password);
  
  // 保存登录状态到 sessionStorage
  sessionStorage.setItem('isLoggedIn', isLoggedIn);
});

다른 페이지에서는 다음 코드를 사용하여 사용자의 로그인 상태를 확인할 수 있습니다.

// 检查登录状态
const isLoggedIn = sessionStorage.getItem('isLoggedIn');

if (isLoggedIn) {
  // 用户已登录，执行相应的操作
} else {
  // 用户未登录，执行相应的操作
}

결론

위의 특정 시나리오 코드 예제를 통해 sessionStorage의 실제 적용을 볼 수 있습니다. 웹 개발 . 이는 데이터를 쉽게 저장하고 복원하는 데 도움이 되어 사용자 경험을 더욱 친숙하게 만듭니다. 물론 sessionStorage에도 몇 가지 제한 사항이 있습니다. 예를 들어 데이터는 현재 브라우저 창이 닫힐 때까지만 유효하며 각 페이지의 sessionStorage 데이터는 서로 독립적입니다. 그러나 많은 시나리오에서 sessionStorage는 여전히 매우 편리하고 실용적인 도구입니다.

위 내용은 sessionStorage를 사용하여 데이터를 저장하는 실제 애플리케이션 시나리오 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!