LocalStorage存储

最新推荐文章于 2024-12-19 00:44:06 发布

Mr_Fox_Q

最新推荐文章于 2024-12-19 00:44:06 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： html5 chrome firefox safari opera

本文链接：https://blog.youkuaiyun.com/skyline222/article/details/40297953

本文详细介绍了HTML5提供的LocalStorage存储机制，对比了其与cookie的区别，并提供了基本的使用方法和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LocalStorage存储是html5提供的一种在客户端持久化存储数据的方法，除非主动删除数据，否则数据是永不过期的。

LocalStorage和cookie相似，但cookie存储有大小限制，而且cookie是由每个对服务器的请求传递,浪费了更多资源,使得cookie的效率不是很高。而LocalStorage基本没有大小限制，（不过最好不要超过2.6M）他只会在请求时使用数据，因此可以在不占用服务器资源的情况下存储大量数据。

LocalStorage支持IE8+，firefox3.0+，opera10.5+，chrome4.0+，safari4.0+的浏览器。IE7以及一下版本的浏览器可以考虑使用userData。（注意：不同浏览器之间是不能共享localstorage中的信息的。）

LocalStorage的方法：

setItem(key,value):以键值对的方式存储数据如：localStorage.setItem("username","Joe");同时也可以用localStorage.username="Joe"和localstorage["username"]="Joe"其余方法也有类似操作,不再累赘叙述。

getItem(key):根据键值key获取对应的value值如：var name=localStorage.getItem("username");

removeItem(key):移除客户端存储的键值key所对应的value数据如：localStorage.removeItem("username");

clear();:清除客户端存储的所有localstorage数据。

localStorage的使用： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript">function getstorage(username){ var storage=window.localStorage; if(storage){ //判断浏览器是否支持localstorage if((storage.getItem('username')!=null && storage.getItem('username')!='') && storage.loginId=='true'){ if(storage.getItem('username')==username){ alert('Welcome again '+username+"!"); }else{ username=prompt('username is error,Please enter your name:',""); alert('Welcome '+username+'!'); if(username!=null && username!=""){ storage.setItem('username',username); storage['loginId']='true'; } } }else{ username=prompt('Please enter your name:',""); alert('Welcome '+username+'!'); if(username!=null && username!=""){ storage.setItem('username',username); storage['loginId']='true'; } } }else{ alert("this browser does not support localstorage"); return ""; }}function checkStorage(){username=getstorage('MrFox')}</script></head><body onload="checkStorage()"></body></html>