ローカルストレージは、ブラウザ側にデータを保存することができる便利な機能で、JavaScriptでもlocalStorageオブジェクトを使用して、データにアクセスできます。便利な反面、現在のローカルストレージ使用には、次のような問題点があり、注意が必要です。

• ローカルストレージに保存されたデータに有効期限が無く、ブラウザを閉じても削除されません（良くも悪くも）。そのため情報漏洩の懸念があり、機密性の高い情報を保存するのは、適切な対策が無い限り避けたほうが良いとされています。
• ローカルストレージに保存されるデータは、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 = '';
    }
  });
});