sessionStorage を使用してデータを保存する実際のアプリケーション シナリオを検討する

sessionStrage を使用してデータを保存する実際的なシナリオの調査

はじめに

Web アプリケーションがますます複雑になるにつれて、多くの場合、データを次の場所に保存する必要があります。別のページを表示するか、ページを更新するときにデータを保存します。この要件は、ブラウザの sessionStorage を使用して簡単に実現できます。この記事では、いくつかの一般的なシナリオを検討し、具体的なコード例を示します。読者が sessionStorage をよりよく理解し、適用できるようになれば幸いです。

1. フォーム データ ストレージ

多くのアプリケーションでは、ユーザーの誤操作やページの更新によるデータ損失を防ぐために、ユーザーが入力しているフォーム データを保存する必要があることがよくあります。この機能は、sessionStorage を使用して簡単に実現できます。

次は簡単な例です。名前と年齢という 2 つの入力ボックスを含むフォームがあるとします。ユーザーがフォームに記入すると、データが 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. ショッピング カートのデータ ストレージ

もう 1 つの一般的なアプリケーション シナリオは、ユーザーのショッピング カート データを保存することです。ユーザーが Web サイトで製品を購入すると、製品情報を 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 に保存して、ユーザーが Web サイトの他のページを閲覧している間もログインしたままにすることができます。

以下は簡単な例です。ユーザーがログイン ページに正常にログインした後、ログイン ステータスを 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 {
  // 用户未登录，执行相应的操作
}

結論

上記の特定のシナリオでは、Web 開発における sessionStorage の実​​際的な応用例がわかります。データの保存と復元が簡単にできるため、ユーザー エクスペリエンスがより使いやすくなります。もちろん、sessionStorage にもいくつかの制限があります。たとえば、データは現在のブラウザ ウィンドウを閉じるまでしか有効ではないこと、各ページの sessionStorage データは互いに独立していることなどです。しかし、多くのシナリオにおいて、sessionStorage は依然として非常に便利で実用的なツールです。

以上がsessionStorage を使用してデータを保存する実際のアプリケーション シナリオを検討するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。