使用localStorage进行本地存储

本文简单的介绍了localStorage的使用方法和优缺点，以及如何使用localStorage实现本地存储。

如果你还不知道localStorage，请阅读Window.localStorage。

如果你还不知道cookie, session, localStorage, sessionStorage之间的区别，请阅读stackoverflow。

DEMO： https://dumengjie.github.io/blog-examples/FileReader/

localStorage的使用方法

localStorage的方法非常简单，就是基本的增删查：

getItem(name)：根据指定的名字name获取对应的值。
setItem(name, value)：为指定的name设置一个对应的值。
removeItem(name)：删除由name指定的名值对。

想要修改某项的话，直接用setItem方法重新设置值即可。

由于每个项目都是作为属性存储在localStorage对象上，所以可以通过点语法或者方括号语法访问属性来读取中值，设置也一样，如下：

// 使用方法存储数据
localStorage.setItem('name', 'Nicholoas');

// 使用属性存储数据
localStorage.book = 'Pro JS';

// 使用方法读取数据
var name = localStorage.getItem('name');

// 使用属性读取数据
var book = localStorage.book;

不过，还是建议大家使用方法而不是属性来访问数据，以免某个键会意外重写该对象上已经存在的对象。

localStorage的优缺点

浏览器对localStorage的大小限制是5MB（每个来源），比cookie的大了不少，基本可以满足日常需求了。

localStorage只能存储字符串，非字符串的数据在存储之前会被转换成字符串。所以在存储一些复杂数据类型时可能有些麻烦，通常的做法是先使用JSON.stringfy()方法将其转换为字符串后存储，使用时取出后再使用JSON.parse()方法进行还原。

// 存储用户信息 
var user = {
  name: 'John',
  id: '321456',
  isVIP: true,
  arr: [3,2,1],
};

var str = JSON.stringfy(user);
localStorage.setItem('userInfo', str);

// 提取用户信息
var infoStr = localStorage.getItem('userInfo');
var info = JSON.parse(infoStr);

一个例子

这个demo配合FileReader实现了本地文件读取和存储，localStorage的三个方法都有用到，源码：

<!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="请选择txt、js、css或html文件，文件内容会被自动读取"></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>

使用localStorage进行本地存储

localStorage的使用方法

localStorage的优缺点

一个例子

推荐阅读更多精彩内容