localStorage.getItemでデータを取得、localStorage.setItemでローカル保存、localStorage.removeItemでデータを削除します。保存した場合は、ブラウザを更新しても、データが残っております。 $(‘#memo’).bind(‘keyup’, function() のbind ‘keyup’は、キーボード入力時に、キーボードが上がった場合に呼び出されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メモ帳</title>
<style>
body {
}
</style>
</head>
<body>
<h1>メモ帳</h1>
<textarea id="memo" rows="10" cols="40" name="40"></textarea>
<p><input type="button" id="clear" value="消去"></p>
<script>
$(function(){
if (localStorage.getItem('memo')){
$('#memo').val(localStorage.getItem('memo'));
}
$('#clear').click(function(){
$('#memo').val('');
localStorage.removeItem('memo');
});
$('#memo').bind('keyup', function(){
localStorage.setItem('memo', $('#memo').val());
});
});
</script>
</body>
</html>
local storageのドキュメントはjqueryの公式サイトなどを参照ください。
https://plugins.jquery.com/tag/localstorage/
