リロードされてもjavascript変数を保持したい

ショッピングカートなどで、URLパラメータで情報を渡した先のページで
リロードがかかっちゃって、パラメータ消え失せてしまう。
そんな時に使えるのがこの仕組み。

ページがリロードされてもJavaScriptの変数の値を保持しておくには、
ブラウザのWeb Storageという機能を使います。

Web Storageには localStorage と sessionStorage の2種類があり、
用途に応じて使い分けます。

localStorage

localStorage を使うと、
ユーザーがブラウザのキャッシュを意図的に削除しない限り、
データを永続的に保存できます。
ブラウザを閉じたり、PCを再起動したりしてもデータは消えません。

複数のタブやウィンドウで同じサイトを開いている場合、データは共有されます。

使い方

  • 保存する時: localStorage.setItem('キー名', '値');
  • 取り出す時: localStorage.getItem('キー名');
  • 削除する時: localStorage.removeItem('キー名');
JavaScript
// 変数 'username' の値をlocalStorageに保存する
let username = 'Taro Yamada';
localStorage.setItem('savedUsername', username);

// ページがリロードされた後でも、保存した値を取り出す
let savedName = localStorage.getItem('savedUsername'); // "Taro Yamada"が取り出せる
console.log(savedName);

※永続的に保存とは言っても、
ユーザーやブラウザの設定でがブラウザ全体のキャッシュやCookieをクリアすると、
関連付けられたlocalStorageのデータも削除されます。

sessionStorage

sessionStorage は、
そのタブ（またはウィンドウ）が開いている間だけデータを保存します。
タブを閉じてしまうと、保存したデータは自動的に消去されます。

同じサイトでも、別のタブを開くとデータは共有されません。
一時的なデータの保存に適しています。

使い方

使い方は localStorage と全く同じです。

JavaScript
// 変数 'cartItemCount' の値をsessionStorageに保存する
let cartItemCount = 5;
sessionStorage.setItem('savedCartCount', cartItemCount);

// 同じタブ内でリロードすれば、値を取り出せる
let savedCount = sessionStorage.getItem('savedCartCount'); // "5"が取り出せる
console.log(savedCount);
// タブを閉じるとこのデータは消える

　　

注意点：オブジェクトや配列の保存

Web Storageには文字列しか保存できません。
オブジェクトや配列を保存したい場合は、
一度JSON形式の文字列に変換する必要があります。

  • 保存する時: JSON.stringify() を使って文字列に変換します。
  • 取り出す時: JSON.parse() を使って元のオブジェクトや配列に戻します。
JavaScript
// ユーザー設定のオブジェクト
const userSettings = {
  theme: 'dark',
  notifications: true
};

// 1. オブジェクトをJSON文字列に変換して保存
localStorage.setItem('settings', JSON.stringify(userSettings));

// 2. 取り出してオブジェクトに戻す
const savedSettingsString = localStorage.getItem('settings');
const loadedSettings = JSON.parse(savedSettingsString);

console.log(loadedSettings.theme); // "dark"

リロード対策には、localStorage が最もよく使われます。

タイトルとURLをコピーしました