HTML5 离线保存数据

最新推荐文章于 2022-04-14 20:40:37 发布

yangqicong

最新推荐文章于 2022-04-14 20:40:37 发布

阅读量913

点赞数

分类专栏： html5 文章标签： html5 function date firefox browser button

本文链接：https://blog.csdn.net/yangqicong/article/details/7041728

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
    <title>HTML5 离线保存数据</title>
</head>
<body>
<p id="localstorage-message">Save text value on the client side (crash-safe)</p>
            <textarea id="ta" placeholder="Type your text here..."></textarea>
            <button id="save-ta">Save</button>
            <p id="ta-log"></p>
            <script defer>
              (function(){

                try {
                  (window.localStorage.getItem) // will throw in Firefox under some settings
                } catch(e){
                  return; // quit because dom.storage.enabled is false
                }

                var area = document.querySelector('#ta');
                // place content from previous edit
                if (!area.value) {
                  area.value = window.localStorage.getItem('value');
                }
                updateLog(false);

                // your content will be saved locally
               //使用持久存储localStorage
               //为每个标签使用sessionStorage
                document.querySelector('#save-ta').addEventListener('click', function () {
                  window.localStorage.setItem('value', area.value);
                  window.localStorage.setItem('timestamp', (new Date()).getTime());
                  updateLog(true);
                }, false);

                function updateLog(new_save) {
                  var log = document.querySelector("#ta-log");
                  var delta = 0;
                  if (window.localStorage.getItem('value')) {
                    delta = ((new Date()).getTime() - (new Date()).setTime(window.localStorage.getItem('timestamp'))) / 1000;
                    if (new_save) {
                      log.textContent = 'Saved. Content will be available after browser refresh/reopen.';
                      setTimeout(function() {
                        log.textContent = '';
                      }, 3000);
                    } else {
                      log.textContent = 'last saved: ' + delta + 's ago';
                    }
                  }
                }

              })();
            </script>
</body>
</html>