view source

JavaScript

document.title = 'メモ帳 入力したテキストを一時保存';

  var text2 = ' ※ ここに書いたメモは、ブラウザを閉じても再度開くと記録が復元されます。\n\nサーバーには情報を送信しないので、個人的なメモに使えます。\n\n保存ボタンはなく、テキストを書き換えるだけで記録が更新されます。';
  var text = document.title +'\n\n\n\n'+ text2;
$(function(){
  var v = localStorage.getItem('textarea');
  var $textarea = $('<textarea>');

  if(!v){
    v = text;
  }
  $textarea.val(v);
  $textarea.css({width:'99.9%',height:'100vh'});
  $textarea.on('keyup', function(){
    save();
  });
  $textarea.on('change', function(){
    save();
  });
  var save = function(){
    var v = $textarea.val();
    console.log(v);
    localStorage.setItem('textarea', v);
  }


  $('html,body').css({overflow:'hidden'});
  var $h1 = $('<h1>').text(document.title);
  var $h2 = $('<h2>').text(text2);
  $('#demo').append($textarea);
  $('#demo').after($h2).after($h1);
});

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-memopad-localstorage/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。