Html Web存储

最新推荐文章于 2024-05-17 03:16:49 发布

liying123466

最新推荐文章于 2024-05-17 03:16:49 发布

阅读量212

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/liying123466/article/details/79182998

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

（1）localStorage - 没有时间限制的数据存储

（2）sessionStorage - 针对一个 session 的数据存储(关闭窗口之后这里之前存储的数据就不见了)

a. localStorage的例子：

<!DOCTYPE html>
<html>
<head>
	<title>h5里面的wed存储</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="result"></div>
	<script type="text/javascript">
	      if(typeof(Storage)!='undefined'){
			localStorage.sitename="小涵涵";
			document.getElementById('result').innerHTML="网站名:"+localStorage.sitename;
		}
		else{
			alert("您的浏览器不支持！");
		}
	</script>
</body>
</html>

2 sessionStorage

<!DOCTYPE html>
<html>
<head>
	<title>h5里面的wed存储</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function clicked(){
			if(typeof(Storage)!='undefined'){
				if(sessionStorage.clickcount){
					sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
				  }
				else{
					sessionStorage.clickcount=1;
				   }
				document.getElementById('result').innerHTML="你已经点击按钮"+sessionStorage.clickcount+"次";
			}
			else{
				alert("你的浏览器不支持!");
			}
		}
	</script>
</head>
<body>
	<button οnclick="clicked()">点我</button>
	<div id="result">
		
	</div>
</body>
</html>

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

a.保存数据：localStorage.setItem(key,value);
b.读取数据：localStorage.getItem(key);
c.删除单个数据：localStorage.removeItem(key);
d.删除所有数据：localStorage.clear();
e .得到某个索引的key：localStorage.key(index);

掌握基本知识很容易的，学以致用才是王道。下面看一个例子：

<!DOCTYPE html>
<html>
<head>
	<title>h5里面的wed存储</title>
	<meta charset="utf-8">
	<script type="text/javascript">
	 if(typeof(Storage)!='undefined'){
	 	localStorage.setItem('html5','未来html的新标准');
	 	localStorage.setItem('css3','没你想象的那么简单');

	 	function cha(){
	 		var cha = document.getElementById('cha');
	 	    var cha_button = document.getElementById("cha_btn");
	 	    var result = localStorage.getItem(cha.value);
	 	    	alert(result);

	 	}

	 	function save(){
	 		var save_one = document.getElementById("save_one");
	 		var save_two = document.getElementById("save_two");
	 		var save_btn = document.getElementById("save_btn");
	 			localStorage.setItem(save_one.value,save_two.value);
	 			alert("保存成功啦！");
	 		}
	 	


	 }

	</script>
</head>
<body>
	<div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
        <label for="sitename">名称：</label>  
        <input type="text" id="save_one" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">作用：</label>  
        <input type="text" id="save_two" name="siteurl"/>  
        <br/>  
        <input type="button" id="save_btn" value="新增记录" οnclick=save() />  
        <hr/>  
        <label for="search_phone">输入名称：</label>  
        <input type="text" id="cha" name="search_site"/>  
        <input type="button" id="cha_btn" value="查找" οnclick=cha() />  
    </div> 
</body>
</html>

我看了一篇博客，他写的更好，大家可以参考一下：点击打开链接

liying123466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html Web存储

localStorage 和 sessionStorage 客户端存储数据的两个对象为：（1）localStorage - 没有时间限制的数据存储（2）sessionStorage - 针对一个 session 的数据存储(关闭窗口之后这里之前存储的数据就不见了)a. localStorage的例子： h5里面的wed存储
复制链接

扫一扫