戻る

Web Storage
sessionStorage / localStorage

ブラウザ上にデータを保存する機能です。
(1) localStorage
(2) sessionStorage

(1) localStorage
ブラウザを閉じてもデータが永続的に保持されます。
(2) sessionStorage
ブラウザやタブを閉じるとデータが破棄されます。

共通要素
キーと値のペアで保存されます。

setItem()保存
getItem()取得
removeItem()削除
clear()全削除

保存できる形式は文字列のみです。
オブジェクトを保存する場合はJSON形式に変換する必要があります。
データはブラウザローカルに保存されます。
下記はsessionStorageおよびlocalStorageのサンプルですが、「sessionStorage」の部分が「localStorage」に変わるだけで使えるようになっています。

[sessionStorage(index.html)]

copy
const radios = document.querySelectorAll('input[name="lang"]');
radios.forEach(r => r.addEventListener('change', () => 
{
	sessionStorage.setItem('lang', r.value);
}));
sessionStorage.setItem('lang', document.querySelector('input[name="lang"]:checked').value);
[sessionStorage(next.html)]

copy
const lang = sessionStorage.getItem('lang') ?? '0';
document.documentElement.setAttribute('lang', lang === '1' ? 'en' : 'ja');
document.getElementById('langDisplay').textContent =
lang === '1' ? 'English selected' : '日本語が選択されています';

[localStorage(index.html)]

copy
const radios = document.querySelectorAll('input[name="lang"]');
radios.forEach(r => r.addEventListener('change', () => 
{
	localStorage.setItem('lang', r.value);
}));
localStorage.setItem('lang', document.querySelector('input[name="lang"]:checked').value);
[localStorage(next.html)]

copy
const lang = localStorage.getItem('lang') ?? '0';
document.documentElement.setAttribute('lang', lang === '1' ? 'en' : 'ja');
document.getElementById('langDisplay').textContent =
lang === '1' ? 'English selected' : '日本語が選択されています';

(例)
[特定のキーだけ削除]
localStorage.removeItem('lang');

[全部削除]
localStorage.clear();



戻る


著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。