localstorage アイテムの有効期限を設定する方法

ローカルストレージの有効期限を設定する方法には、具体的なコード例が必要です。

インターネットの急速な発展に伴い、フロントエンド開発では多くの場合、ブラウザにデータを保存する必要があります。 Localstorage は、ブラウザーでローカルにデータを保存する方法を提供することを目的とした、一般的に使用される Web API です。ただし、localstorage には有効期限を直接設定する方法はありません。この記事では、ローカルストレージの有効期限を設定する方法をコード例を用いて紹介します。

始める前に、まずローカルストレージの基本的な使用法を理解する必要があります。 localstorage を操作するには、次の 2 つのメソッドを使用できます。

• localStorage.setItem(key, value): 指定されたキーと値のペアを localstorage に保存します。
• localStorage.getItem(key): 指定されたキーの値を localstorage から取得します。

localstorage に格納される値は文字列型のみであることに注意してください。別の型の値を保存する必要がある場合は、JSON.stringify() メソッドを使用して文字列に変換し、それを取り出すときに JSON.parse() メソッドを使用して元の型に変換します。 。

次に、localstorageを使用して有効期限を設定する機能を実装します。データを保存するときに有効期限タイムスタンプを保存し、データを取得するときに有効期限が切れているかどうかを判断できます。以下はサンプル コードです。

// 设置localstorage的过期时间
function setLocalStorageWithExpiration(key, value, expirationMinutes) {
  const expirationMS = expirationMinutes * 60 * 1000;
  const record = {
    value: value,
    expiration: new Date().getTime() + expirationMS
  };
  localStorage.setItem(key, JSON.stringify(record));
}

// 获取localstorage的值（同时判断是否过期）
function getLocalStorageWithExpiration(key) {
  const record = JSON.parse(localStorage.getItem(key));
  if (!record) {
    return null;
  }
  if (new Date().getTime() > record.expiration) {
    localStorage.removeItem(key);
    return null;
  }
  return record.value;
}

// 使用示例
setLocalStorageWithExpiration('username', 'John', 5); // 设置过期时间为5分钟
console.log(getLocalStorageWithExpiration('username')); // 输出：John

// 5分钟后
setTimeout(() => {
  console.log(getLocalStorageWithExpiration('username')); // 输出：null
}, 5 * 60 * 1000);

上の例では、setLocalStorageWithExpiration 関数を使用して、ローカル ストレージの有効期限を設定しています。キー名、キー値、有効期限expirationMinutes (分単位)の 3 つのパラメータを受け入れます。このうち、有効期限は、現在時刻に指定された分数を加えた値を計算して取得され、キーと値のペアと有効期限がローカルストレージに保存されます。

getLocalStorageWithExpirationこの関数は、localstorage の値を取得し、有効期限が切れているかどうかを判断するために使用されます。まず、指定されたキーの値を localstorage から取得し、それをオブジェクトに解析します。次に、オブジェクトが存在するかどうかを確認し、存在しないか期限切れの場合は null を返し、期限切れでない場合はキー値を返します。

この例では、「username」という名前のキーと値のペアを設定し、有効期限を 5 分に設定します。セットアップ後、getLocalStorageWithExpiration 関数を通じて 'username' の値を取得し、それをコンソールに出力します。出力が 'John' であることがわかります。次に、setTimeout 関数を使用して、5 分後に再度 'username' の値を取得することをシミュレートし、それをコンソールに出力します。出力が null であることがわかります。これは、キーと値のペアが有効期限が切れて削除されました。

上記の例により、localstorage を使用して有効期限を設定する機能を実装することができました。ローカルストレージはクライアントブラウザに保存されるため、ローカルストレージの使用には一定のリスクがあることに注意してください。したがって、ローカルストレージを使用して機密情報や重要なデータを保存する場合は、データのセキュリティと機密性に注意してください。

以上がlocalstorage アイテムの有効期限を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。