LocalStorage 是一种 web 端的存储机制,它使得由 JavaScript 编写的网站或者应用可以无限期的在浏览器中存储并访问数据。什么是无限期呢?就是说存储在浏览器中的数据是会一直存在的,及时浏览器被关闭了也不会消失。
LocalStorage 的使用方法
要在你的 web 应用中使用 LocalStorage,只需要掌握以下的五种方法就可以了:
setItem(): "增(改)",将数据以键值对的形式存到 LocalStorage 中
getItem(): "查",从 LocalStorage 获得对应键值的数据
removeItem(): "删",删除 LocalStorage 中给定键的数据条目
clear(): 清空 LocalStorage
key(): 传递一个数字 n,获取第 n 个键的数据
setItem()
就像这个方法的名一样,它可以在 LocalStorage 中存储数据。
它会接受两个参数,一个 key 和一个 value,通过 key 可以获取到对应的 value。
window.localStorage.setItem('name', 'Cola Frontend');
在这里,name 是我们的给定的 key,而 Cola Frontend 就是与这个这个 key 相对应的 value。记住:LocalStorage 只能存储字符串。
如果你想要将一个对象或者一个数组存储在 LocalStorage 中,你需要先将它们转换成字符串的形式。如何将其转为字符串呢?这里不是简单地 toString() 方法,而是要用到 JSON.stringify() 这个方法:
const developer = {
name: 'Cola Frontend',
skills: ['React', 'Redux', 'RxJS', 'TypeScript'],
}
window.localStorage.setItem('developer', JSON.stringify(developer));
getItem()
使用 getItem() 方法可以访问到存在浏览器 localStorage 中的数据对象,它以 key 作为参数,并且返回与 key 相对应的 value。上面提到过,这个 value 只是字符串,并不是 JavaScript 对象或者数组。
如何拿到我们刚才存储的值呢?
window.localStorage.getItem('developer');
返回的数据是这样的:
"{"name":"Cola Frontend","skills":["React","Redux","RxJS","TypeScript"]}"
这显然不是我们想要的结果,要想正常的使用这个值,你需要先将它转换回对象类型。我们可以使用 JSON.parse() 来将一个 JSON 字符串转换成 JavaScript 对象:
JSON.parse(window.localStorage.getItem('developer'));
removeItem()
removeItem() 方法会根据传入的 key 删除 localStorage 中对应的数据。如果不存在这个 key 的话,那么它什么都不会做。
window.localStorage.removeItem('developer');
clear()
clear() 方法会删除 domain 内整个 localStorage 中的所有记录。它没有参数。
var keyName = window.localStorage.key(index);
浏览器支持情况
key()
key() 这个方法看起来没什么太大的必要,它的设计初衷是让你能很方便的通过 keys 遍历整个 localStorage,或者通过索引获取到 key 的名字。
var keyName = window.localStorage.key(index);
localStorage 作为一种 web 端的存储机制,被写入了 HTML5 的设计规范中。所有的主流浏览器对它都是支持的,包括了 IE8。为了确保浏览器支持 localStorage,你可以使用下面这段代码进行检验:
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}
使用限制
通过上面的介绍可以知道, localStorage 用起来是很方便的,但是这种方便带来的弊端就是很容易错误地使用它。遵循以下的几点建议,不要在这几种情况下使用 localStorage:
不要在 localStorage 中存储敏感的用户信息
它不是服务器端数据库的替代品,因为信息只保存在浏览器中
localStorage 的大小不能超过 5MB,所有浏览器都是这样
localStorage 非常没有安全性,它没有对数据的保护机制,可以被任意的 web 端代码获取
localStorage 是同步的,这意味着任何的操作都是一个接一个执行的
标签:存储,浏览器,window,LocalStorage,key,使用,localStorage,方法
From: https://www.cnblogs.com/baozhengrui/p/18371581