More than 3 years have passed since last update.

localStorageを操作する

Last updated at 2021-08-18Posted at 2021-08-06

「お気に入り機能」や「最近見た記事（商品）」などの実装でよく使います。

localStorageにデータを保存する

localStorage.setItem(キー名);

ローカルストレージは各ブラウザでドメインごとに保存されるので、
同一ドメイン内で複数実装する場合は接頭辞を変える。
だいたい追加した順番にソートしたりするので、追加する際は日時を取得して一緒に格納する場合が多いです。

商品系の場合（例）　　：favProduct-商品ID
ニュース系の場合（例）：favNews-記事ID
（分かりやすければ何でも良い）

デベロッパーツール（F12）→ Application → Local Storage →　ドメイン選択
で、このドメインのLocal Storageに何が入っているか確認できます。

consoleにlocalStorageと打ち込んでも確認できます。

localStorage.getItem(キー名);

localStorageをforで回して任意の接頭辞が付いているデータのみ取り出したり。

let favArr = [];
for(let i in localStorage) {
	if(i.indexOf('favProduct-') !== -1) {
		favArr.push(i);
	}
}

localStorage.removeItem(キー名);

localStorage.clear();