HTML5存储数据--localStorage长期保存数据

￡神魔★判官ぃ 2022-09-19 12:29 212阅读 0赞

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>使用localStorage长期保存数据</title>  
</head>

<body onLoad="pageload();">  
<fieldset>  
<legend>登陆</legend>  
<ul>  
<li>  
<span id="sid"></span>  
</li>  
<li>名称:  
<input type="text" id="name">  
</li>  
<li>密码:  
<input type="password" id="pwd">  
</li>  
<li>是否保存密码?  
<input type="checkbox" id="checksave">  
</li>  
<li>  
<input type="button" id="btn" name="btn" value="登录" onClick="btn\_click()">  
<input type="reset" id="btnc" name="btnc" value="取消" >  
</li>  
</ul>  
</fieldset>  
</body>  
<script type="text/javascript">

function $(id)\{  
return document.getElementById(id);  
\}  
function pageload()\{  
 //获取数据  
 var name = localStorage.getItem("KeyName");  
 var pwd =localStorage.getItem("KeyPass");  
 if(name)\{  
  $("name").value = name;  
  \}  
  if(pwd)\{  
  $("pwd").value  = pwd;   
  \}  
   
\}

function btn\_click()\{  
  var name=  $("name").value  
  var pwd =$("pwd").value;  
  localStorage.setItem("KeyName",name);  
  if($("checksave").checked)\{  
   localStorage.setItem("KeyPass",pwd);  
  \}else\{  
  localStorage.removeItem("KeyPass");  
    
  \}  
  $("sid").className ="status"  
  $("sid").innerHTML = "登陆成功"  
   
\}

</script>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Web存储数据(localStorage,sessionStorage)

客户端存储数据的之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也

布满荆棘的人生/ 2023年10月17日 11:46/ 0 赞/ 35 阅读

相关 HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>清空localStorage的全部数据<

川长思鸟来/ 2022年09月19日 13:28/ 0 赞/ 176 阅读

相关 HTML5存储数据----sessionStorage保存与读取临时数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用sessionStorage保存与读

素颜马尾好姑娘i/ 2022年09月19日 12:29/ 0 赞/ 202 阅读

相关 HTML5存储数据--localStorage长期保存数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用localStorage长期保存数据

￡神魔★判官ぃ/ 2022年09月19日 12:29/ 0 赞/ 213 阅读

相关 HTML5本地存储Localstorage

转自 [点击打开链接][Link 1] ———————————————— [HTML5本地存储Localstorage][Link 1] 什么是locals

谁践踏了优雅/ 2022年08月21日 02:28/ 0 赞/ 285 阅读

相关 HTML5 LocalStorage 本地存储

http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储，这玩意真是历尽千辛万

布满荆棘的人生/ 2022年08月06日 06:25/ 0 赞/ 209 阅读

相关 HTML5 LocalStorage 本地存储

HTML5 LocalStorage 本地存储,，说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： ![2011052411382

Bertha 。/ 2022年07月24日 04:29/ 0 赞/ 233 阅读

相关 HTML5 Web存储 sessionStorage localStorage

sessionStorage :浏览器关闭会清除 localStorage：长时间保存 api一致：代码： <!DOCTYPE html> <h

曾经终败给现在/ 2022年07月19日 06:36/ 0 赞/ 265 阅读

相关 HTML5 LocalStorage 本地存储

HTML5 LocalStorage 本地存储说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： ![201105

缺乏、安全感/ 2021年09月19日 02:58/ 0 赞/ 511 阅读

相关 H5-localStorage数据存储总结

一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了co

骑猪看日落/ 2021年09月14日 05:18/ 0 赞/ 503 阅读