JavaScript でローカルストレージを使ってユーザーが選択したモードなどを保存・取得する
Published Feb 19, 2025
⋅
Updated Mar 12, 2025
View モードの変更やダークモードの使用など、ウェブサイトやアプリケーション内でユーザーが選択したモードはローカルストレージに保存しておくと親切。
ここでは、 View モードの変更を例に、ローカルストレージの読み書きを行う方法を示す。
例えば、次のような <button> のマークアップがあるとする。
<button data-view="list">List</button>
<button data-view="grid">grid</button>それぞれのボタンクリック時に該当のボタンの data-view 属性の値をローカルストレージにセットする。 localStorage.setItem() を使い、 'viewMode' というキーを持つ項目を追加する。
const triggers = container?.querySelectorAll('button');
triggers?.forEach((trigger) => {
trigger.addEventListener('click', (event: MouseEvent) => {
if (!(event.currentTarget instanceof HTMLButtonElement)) return;
const nextView = event.currentTarget.dataset.view ?? 'list';
localStorage.setItem('viewMode', nextView);
});
});これで、localStorage.getItem('viewMode') 使って、その値を取得できる。例えば、次のように、初回読み込み時にストアされている値を使ってコンテナーの dataset をセットすることができる。
const storedView = localStorage.getItem('viewMode');
if (storedView && container) {
container.dataset.view = storedView;
}以上で、ローカルストレージの読み書きはできるが、実際には、現在のモードのボタンに disabled を付与したり、ボタンクリック時にコンテナーの状態も変更しておく必要がある。
それらを含めたマークアップとスクリプトは次のようになる。
<button data-view="list" disabled>List</button>
<button data-view="grid">grid</button>const storedView = localStorage.getItem('viewMode');
if (storedView && container) {
container.dataset.view = storedView;
triggers?.forEach((trigger) => {
trigger.disabled = trigger.dataset.view === storedView;
});
}
triggers?.forEach((trigger) => {
trigger.addEventListener('click', (event: MouseEvent) => {
if (!container || !(event.currentTarget instanceof HTMLButtonElement))
return;
const nextView = event.currentTarget.dataset.view ?? 'list';
container.dataset.view = nextView;
triggers.forEach((trigger) => {
trigger.disabled = trigger.dataset.view === nextView;
});
localStorage.setItem('viewMode', nextView);
});
});参考