localStorage简明教程（转）

localStorage简明教程（转）

原文地址：https://baijiahao.baidu.com/s?id=1677522777896255551

localStorage 是一种web存储方式，我们可以在使用 JavaScript 编写网站和 app 时用它来存储数据到浏览器中。由于数据可以长久地存储，也就意味着浏览器窗口关闭后数据也不会丢失。

localStorage API

要在 web 应用中使用 localStorage，首先要熟悉它提供的属性和方法：

• length：返回 localStorage 中的键值对的数目
• setItem()：增加一个键值对到 localStorage 中
• getItem()：从 localStorage 中查询指定 key 的值
• removeItem()：从 localStorage 中删除指定的键值对
• clear()：清空 localStorage 中所有键值对
• key()： 传入一个数字 n，用于返回指定第 n 个键的名字

setItem()

从它的名字可以得知，此方法可以用来存储数据到 localStorage 中。

它接收两个参数：一个 key 和一个 value。这个 key 稍后可用于从 localStorage 中检索它的值。

window.localStorage.setItem('name', 'Tylor');

上述代码中的 ‘name’ 就是 key，’Tylor’ 就是 value。

需要注意的是 localStorage 只能存储字符串。要存储数组或对象，需要先把它们转成字符串。要实现这个操作，需要在调用 setItem() 之前先用 JSON.stringify() 方法转换一下：

const person = {
	name: "tylor",
	location: "London"
}
window.localStorage.setItem('user', JSON.stringify(person));

注意：此方法执行时可能会抛出异常，例如存储空间已满时。建议使用 try...catch...语句处理异常以避免程序报错。

getItem()

getItem() 方法可以用来访问已存储在浏览器 localStorage 中的数据。

它只接收一个参数 key ，会把对应的 value 作为字符串返回。

要检索上面保存的 user 数据，可以这样做：

window.localStorage.getItem('user');

调用之后会返回一个字符串：

"{"name":"Tylor", "location":"London"}"

要在 JavaScript 中使用该值，你可能想把它转为一个对象。这时可以用 JSON.parse() 方法把 JSON 字符串转为 JavaScript 对象。

JSON.parse(window.localStorage.getItem('user'));

removeItem()

当传入一个 key 时，removeItem() 方法会从 localStorage 中删除指定的数据。如果没有找到指定的 key，则什么都不做。

window.localStorage.removeItem('name');

clear()

调用此方法后，会清空当前域名下所有存储在 localStorage 中的数据。调用时不需要传入任何参数。

window.localStorage.clear();

key()

key() 方法一般用于遍历 localStorage 中所有的数据时，传入一个以 0 开始计数的数字，它会返回对应的 key 的名字。

var KeyName = window.localStorage.key(index);

浏览器支持情况

localStorage 是 HTML5 规范的一部分，目前已经在主流浏览器上得到了广泛支持，包括 IE8。要检查当前浏览器是否支持 localStorage，可以使用如下代码检测：

if (typeof(Storage) !== "undefined") {
	// Code for localStorage
	} else {
	// No web storage Support.
}

需要注意的是存在浏览器支持 localStorage，但是无法存储数据的情况。例如存储空间已满，或者当前处于隐私浏览模式。这时我们可以做更精细的检查：

function storageAvailable(type) {
	var storage;
	try {
		storage = window(type);
		var x = '__storage_test__';
		storage.setItem(x, x);
		storage.removeItem(x);
		return true;
	}
	catch(e) {
		return e instanceof DOMException && {
		// everything except Firefox
		e.code === 22 ||
		// Firefox
		e.code === 1014 ||
		// test name field too, because code might not be present
		// everything except Firefox
		e.name === 'QuotaExceededError' ||
		// Firefox
		e.name ==='NS_ERROR_DOM_QUOTA_REACHED') &&
		// acknowledge QuotaExceededError only if there's something already stored
		(storage && storage.length !== 0);
	}
}

这是使用方法：

if (storageAvailable('localStorage')) {
	// Yippee! We can use localStorage awesomeness
} else {
	// Too bad, no localStorage for us
}

localStorage 的限制

localStorage 的用法很简单，也很容易被误用。如下列出了它的一些限制，此时不要使用 localStorage：

• 不要在 localStorage 中存储敏感的用户信息
• 它不是服务器端数据库的替代品，因为它的数据只存在浏览器中
• localStorage 的存储空间较小，不同浏览器存在差异，一般为 5M
• localStorage 中的数据非常不安全，缺少保护机制，网页中的任何代码都可以访问它
• localStorage 的操作是同步的

至此，我们了解了 localStorage 的功能，可以在开发中根据项目需要选用它。