使用localStorage进行本地存储

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

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

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

Demo： https://dumengjie.github.io/blog-demos/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进行本地存储

localStorage的使用方法

localStorage的优缺点

一个例子

FEATURED TAGS

FRIENDS