使用localStorage进行本地存储

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

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

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

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

localStorage的使用方法

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

1. getItem(name)：根据指定的名字name获取对应的值。
2. setItem(name, value)：为指定的name设置一个对应的值。
3. 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的三个方法都有用到，源码：

    
    
    
    


    

        
        
        本地存储
        清除存储