牛骨文教育服务平台(让学习变的简单)
博文笔记

Html使用localStorage存储,读取,删除数据

创建时间:2016-11-18 投稿人: 浏览次数:161



<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
   <div id="msg"></div>
   <input type="text" id="msgtxt"/>
   <button id="savemsg" onclick="savemsg("msgtxt")">保存</button>
   <button id="showmsg" onClick="showmsg("msg")">显示</button>
   <button id="removeBtn" onClick="removeKey("key")">删除</button>
 </body>

<script>
function savemsg(id){

	var savemsg = document.getElementById(id);
	var msg=savemsg.value;
	 for(var i=0;i<100;i++)
	 {
		 // 循环存储值,并动态添加键值对
		localStorage.setItem("message"+i,msg+"-"+i);
	 }
}

function showmsg(id){

	// 显示数据到 Div
	var showmsg= document.getElementById(id);
	for(var i=0;i<100;i++)
	{
		showmsg.innerHTML+=localStorage.getItem("message"+i) + " ";
	}

}

function removeKey(key){
		
		
	for(var i=0;i<100;i++)
	{
		// 查找键值对删除
		localStorage.removeItem("message"+i);
        }

	//localStorage.clear(); 删除所有
}

</script>

</html>

效果图:








声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。