HOME > JavaScriptの復習(トップ) > [js]localStorageにデータ保存、削除(jQueryとVanilla JSとの比較)
localStorageオブジェクトを使ってブラウザにデータを保存、削除、クリア
ローカルストレージは、ブラウザ側にデータを保存することができる便利な機能で、JavaScriptでもlocalStorageオブジェクトを使用して、データにアクセスできます。便利な反面、現在のローカルストレージ使用には、次のような問題点があり、注意が必要です。
textareaに文字列を書込み、「書込みデータを保存」ボタンをクリックすると、localStorageに保存します。「保存データを下側に表示」ボタンをクリックすると、保存時刻と内容を表示します。「保存データと表示を消去」ボタンをクリックすると、localStorageのデータを表示とともに消去します。また、 消去せずに画面を閉じ、再度開くと、内容は保持され(textareaにも)、再度「保存データを下側に表示」ボタンをクリックすると、保存時刻と内容を表示します。
- ローカルストレージに保存されたデータに有効期限が無く、ブラウザを閉じても削除されません(良くも悪くも)。そのため情報漏洩の懸念があり、機密性の高い情報を保存するのは、適切な対策が無い限り避けたほうが良いとされています。
- ローカルストレージに保存されるデータは、Cookiieの4KBに比べて多いものの容量制限があり(ブラウザにより 10 MB、または5MB)、過剰にデータを保存すると、ブラウザのパフォーマンスに影響を与える可能性があります。
- 重複になりますが、ローカルストレージに保存されたデータは有効期限が無く、セッションとは無関係に保存が永続的なため、適切な管理と処理(更新や削除が必要な場合)が必要になります。
下記の(1)と(2)は実際に動作するサンプルで、同じ動きをjQueryとVanilla JSでおこなっています。なお、
使い方:
textareaに文字列を書込み、「書込みデータを保存」ボタンをクリックすると、localStorageに保存します。「保存データを下側に表示」ボタンをクリックすると、保存時刻と内容を表示します。「保存データと表示を消去」ボタンをクリックすると、localStorageのデータを表示とともに消去します。また、 消去せずに画面を閉じ、再度開くと、内容は保持され(textareaにも)、再度「保存データを下側に表示」ボタンをクリックすると、保存時刻と内容を表示します。
● (1) jQueryでローカルストレージを利用
保存時刻:
内容:
(1)のスクリプト
$(function(){
$('#btn-s').on('click',function(){
if(window.localStorage){
const setData = $('#set').val();
const dateMM = (new Date()).toLocaleString();
localStorage.setItem("key1", setData);
localStorage.setItem("key2", dateMM);
}
});
$('#btn-g').on('click',function(){
if(window.localStorage){
$('#getData').text( localStorage.getItem("key1") );
$('#dateMM').text( localStorage.getItem("key2") );
}
});
$('#btn-r').on('click',function(){
if(window.localStorage){
$('#getData').text( localStorage.removeItem("key1") );
$('#dateMM').text( localStorage.removeItem("key2") );
$('#getData').text("");
$('#dateMM').text("");
}
});
});
● (2) Vanilla JS(素のJavaScript)でローカルストレージを利用
保存時刻:
内容:
(2)のスクリプト
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn-s2').addEventListener('click', function() {
if (window.localStorage) {
const setData2 = document.getElementById('set2').value;
const dateMM2 = (new Date()).toLocaleString();
localStorage.setItem('key11', setData2);
localStorage.setItem('key22', dateMM2);
}
});
document.getElementById('btn-g2').addEventListener('click', function() {
if (window.localStorage) {
document.getElementById('getData2').textContent = localStorage.getItem('key11');
document.getElementById('dateMM2').textContent = localStorage.getItem('key22');
}
});
document.getElementById('btn-r2').addEventListener('click', function() {
if (window.localStorage) {
localStorage.removeItem('key11');
localStorage.removeItem('key22');
document.getElementById('getData2').textContent = '';
document.getElementById('dateMM2').textContent = '';
}
});
});