优秀的编程知识分享平台

网站首页 > 技术文章 正文

Web项目localStorage最佳实践(html5 webstorage)

nanyue 2024-08-10 18:38:03 技术文章 6 ℃

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.
}

限制

尽管它很好用,但是还是有以下建议

  1. 不要将敏感用户信息存储在localStorage中
  2. 它不能替代基于服务器的数据库,因为信息仅存储在浏览器中
  3. 一般主流浏览器的LocalStorage限制为5MB
  4. LocalStorage非常不安全,因为它没有任何形式的数据保护,可以通过网页上的任何代码访问。
  5. LocalStorage是同步的。意味着每个被调用的操作只会一个接一个地执行。

为了安全,也可以手动加密对象然后存进localStorage

手动扩展(来自github)

地址:https://gist.github.com/supersha/5902372,
//看图或打开原地址查看

扩展之后如何使用

最近发表
标签列表