Web Storage の使い方

6511 ワード
HTML5 webstorage JQUER HTML5 テキストリンク

こちらのページを参考にしました。
HTML5 Web Storage の使い方

web_storage.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="web_storage.js"></script>
<title>Web Storage</title>
</head>
<body>
<h1>Web Storage</h1>

<h2>保存</h2>
<div>
<input type="text" id="text1">
<button type="button" id="saveButton">Save</button>
</div>

<h2>読込み</h2>
<div>
<button type="button" id="readButton">Read</button>
</div>

<p />
<div class="message">
</div>
<p />
Aug/15/2020<p />
</body>
</html>
web_storage.js
// ---------------------------------------------------------------
//  test.js
//
//                  Aug/15/2020
//
// ---------------------------------------------------------------
jQuery(function()
{
    jQuery('#saveButton').click(function(){

        if(window.localStorage){
            var ss = jQuery('#text1').val()
            localStorage.setItem("key1", ss)
            jQuery('#text1').val("")
        }

    })

    jQuery('#readButton').click(function(){

        if(window.localStorage){
            value = localStorage.getItem("key1")
            jQuery(".message").text(value)
//          alert( localStorage.getItem("key1") );
        }

    })
})

// ---------------------------------------------------------------

1) ペーにアクセス

2) 保存

3) 読み込み