使用localStorage进行本地存储代码

最新推荐文章于 2022-03-07 13:42:54 发布

黛梨

最新推荐文章于 2022-03-07 13:42:54 发布

阅读量1.2k

点赞数

分类专栏：代码示例 html（5）文章标签：本地存储代码

本文链接：https://blog.csdn.net/pedrojuliet/article/details/75253183

版权

代码示例同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html（5）

6 篇文章 0 订阅

订阅专栏

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>

黛梨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用localStorage进行本地存储代码

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
复制链接

扫一扫