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 中检索它的值。
上述代码中的 ‘name’ 就是 key,’Tylor’ 就是 value。
需要注意的是 localStorage 只能存储字符串。要存储数组或对象,需要先把它们转成字符串。要实现这个操作,需要在调用 setItem() 之前先用 JSON.stringify() 方法转换一下:
注意:此方法执行时可能会抛出异常,例如存储空间已满时。建议使用 try...catch...语句处理异常以避免程序报错。
getItem()
getItem() 方法可以用来访问已存储在浏览器 localStorage 中的数据。
它只接收一个参数 key ,会把对应的 value 作为字符串返回。
要检索上面保存的 user 数据,可以这样做:
调用之后会返回一个字符串:
要在 JavaScript 中使用该值,你可能想把它转为一个对象。这时可以用 JSON.parse() 方法把 JSON 字符串转为 JavaScript 对象。
removeItem()
当传入一个 key 时,removeItem() 方法会从 localStorage 中删除指定的数据。如果没有找到指定的 key,则什么都不做。
clear()
调用此方法后,会清空当前域名下所有存储在 localStorage 中的数据。调用时不需要传入任何参数。
key()
key() 方法一般用于遍历 localStorage 中所有的数据时,传入一个以 0 开始计数的数字,它会返回对应的 key 的名字。
浏览器支持情况
localStorage 是 HTML5 规范的一部分,目前已经在主流浏览器上得到了广泛支持,包括 IE8。要检查当前浏览器是否支持 localStorage,可以使用如下代码检测:
需要注意的是存在浏览器支持 localStorage,但是无法存储数据的情况。例如存储空间已满,或者当前处于隐私浏览模式。这时我们可以做更精细的检查:
这是使用方法:
localStorage 的限制
localStorage 的用法很简单,也很容易被误用。如下列出了它的一些限制,此时不要使用 localStorage:
不要在 localStorage 中存储敏感的用户信息它不是服务器端数据库的替代品,因为它的数据只存在浏览器中localStorage 的存储空间较小,不同浏览器存在差异,一般为 5MlocalStorage 中的数据非常不安全,缺少保护机制,网页中的任何代码都可以访问它localStorage 的操作是同步的
至此,我们了解了 localStorage 的功能,可以在开发中根据项目需要选用它。
举报/反馈

小象Web开发

754获赞 122粉丝
关注 Web 开发,分享编程技巧
程序员
关注
0
0
收藏
分享