使用localStorage进行本地存储
2017-07-14 本文已影响259人
杜伊特
本文简单的介绍了localStorage的使用方法和优缺点，以及如何使用localStorage实现本地存储。
如果你还不知道localStorage，请阅读Window.localStorage。
如果你还不知道cookie, session, localStorage, sessionStorage之间的区别，请阅读stackoverflow。
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>
