使用localStorage进行本地存储代码

来源:互联网 发布:xp网络连接图标不见了 编辑:程序博客网 时间:2024/06/02 02:26

localStorage的使用方法见:

http://blog.csdn.net/pedrojuliet/article/details/62889501

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width,minimum-scale=1.0">    <title>FileReader</title></head><body>    <div id="file-div">        <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown" />        <textarea name="filereader" placeholder="......."></textarea>        <button type="button" name="storebutton">本地存储</button>        <button type="button" name="clearbutton">清除存储</button>    </div>    <script>        window.onload = function(){            var text = document.getElementsByName('filereader')[0],                inputFile = document.getElementsByName('inputfile')[0],                storeButton = document.getElementsByName('storebutton')[0],                clearButton = document.getElementsByName('clearbutton')[0];            // 检测localStorage中是否已有缓存            if(window.localStorage.getItem('textareaStorage')) {                alert('检测到本地存储的文件,已为您自动恢复');                text.value = window.localStorage.getItem('textareaStorage');            }             //上传文件            inputFile.onchange = function(){                console.log(this.files);                var reader = new FileReader();                reader.readAsText(this.files[0], 'UTF-8');                reader.onload = function (e) {                    // urlData就是对应的文件内容                    var urlData = this.result;                    text.value = urlData;                };            };             // 存储文件            storeButton.onclick = function(){                window.localStorage.setItem('textareaStorage', text.value);                alert('保存成功');            };             // 清除存储            clearButton.onclick = function(){                window.localStorage.removeItem('textareaStorage');                alert('清除成功');            };        };    </script></body></html>