LocalStorage是一种Web存储,允许Javascript网站和应用程序在浏览器中存储和访问数据,没有过期日期。这意味着即使在浏览器窗口关闭后,存储在浏览器中的数据也将保持不变。因此本文还将介绍如何对localStorage进行扩展来间接的设置过期时间。
自身用法
原生提供了五种API
setItem(): 向LocalStorage添加键和值
getItem(): 通过LocalStorage中的键检索值
removeItem(): 从LocalStorage中按键删除项目
clear(): 清除所有LocalStorage
key(): 传递一个数字来检索LocalStorage的第n个键
setItem()
此方法是将将值存储在LocalStorage对象中,它需要传递两个参数:一个键和一个值(key,value)
window.localStorage.setItem('name', 'Obaseki Nosa'); //注意:LocalStorage只能存储字符串,如果想存储对象需要将它们转换为字符串 window.localStorage.setItem('user', JSON.stringify(person));//person是你要存储的对象
getItem()
与setItem相反,它用来获取存储在localStorage中的值,参数是你想要获取的值对应的key
var value=window.localStorage.getItem('user') //要使用它可以转换成js对象 JSON.parse(value);
removeItem()
前面两者是设置和获取值,removeItem()则是删除一个localStorage的一个键值对对象,参数是你想要删除数据对应的key
window.localStorage.removeItem('name');
clear()
removeItem()是删除某一个localStorage对象,而clear()则是清空所有的localStorage,不需要任何参数
window.localStorage.clear();
key()
当你不清楚本地localStorage存储了多少数据的时候,用key(index)方法是一个不错的选择,key(index)方法可以遍历localStorage存储的key
for (i = 0; i < localStorage.length; i++) { document.write(localStorage.key(i) + ":" + localStorage.getItem(localStorage.key(i)) + "<br/>"); }
浏览器支持
LocalStorage作为一种Web存储是HTML5规范。它受到包括IE8在内的主流浏览器的支持。为确保浏览器支持LocalStorage,可以使用以下代码段进行检查:
if (typeof Storage !== "undefined") { // Code for localStorage } else { // No web storage Support. }
限制
尽管它很好用,但是还是有以下建议
- 不要将敏感用户信息存储在localStorage中
- 它不能替代基于服务器的数据库,因为信息仅存储在浏览器中
- 一般主流浏览器的LocalStorage限制为5MB
- LocalStorage非常不安全,因为它没有任何形式的数据保护,可以通过网页上的任何代码访问。
- LocalStorage是同步的。意味着每个被调用的操作只会一个接一个地执行。
为了安全,也可以手动加密对象然后存进localStorage
手动扩展(来自github)
地址:https://gist.github.com/supersha/5902372, //看图或打开原地址查看