定番
新着
履歴

HTML5 ローカルストレージ

HTML5 ローカルストレージ

ローカルストレージを使ってブラウザにデータを保存します。ほとんどのメジャーブラウザは対応していますが容量が5MBか10MBと違いがあります。なので5MB程度に抑えておけば概ね問題ないでしょう。Cookieと違い有効期限が現在ないので利用したら放置ではなくなるべく削除まで管理すると良いです。

保存
読み込み
削除
データ表示エリア

保存

  function setStrg() {
    key = 'k';
    v = $('form input#input_text').val();
    if(v){
      value = $('form input#input_text').val();
      storage.setItem(key, value);
      $('#msg').html(value+'を保存しました。');
    }else{
      $('#msg').html('入力情報がありません');
    }
  }

読み込み

  function loadStrg(){
    key = 'k';
    v = storage.getItem(key);
    if(v){
    $('#my').html(v);
    $('#msg').html('読み込みました');
    }else{
    $('#msg').html('データはありません');
    }
  }

削除

  function removeStrg() {
    storage.clear();
    loadStrg();
    $('#msg').html('削除しました。');
  }

HTMLサンプル

<form>
<input type="text" name="text" size="30" value="" id="input_text" />
</form>
<div class="demo_btn" onclick="setStrg;">保存</div>
<div class="demo_btn" onclick="loadStrg();">読み込み</div>
<div class="demo_btn" onclick="removeStrg();">削除</div>
<div id="msg"></div>
<div id="my">データ表示エリア</div>
2016-03-24 13:14:22
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top