HTML5 Web 存储

最新推荐文章于 2024-05-04 17:32:05 发布

FengNingXueChen

最新推荐文章于 2024-05-04 17:32:05 发布

阅读量241

点赞数

分类专栏：网络文章标签： html

本文链接：https://blog.csdn.net/FengNingXueChen/article/details/89706243

版权

网络专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以键/值对存在, web网页的数据只允许该网页访问使用。

1. localStorage

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

2. 检查浏览器是否支持 localStorage

<html>
	<head>
	<body>
		
    <title>菜鸟教程(runoob.com)</title>
	</body>
	<script>
	function clickCounter()
	{
        //检查是否支持localStorage
		if(typeof(Storage)!=="undefined")
		{
			if (localStorage.clickcount)
			{
				localStorage.clickcount=Number(localStorage.clickcount)+1;
			}
			else
			{
				localStorage.clickcount=1;
			}
			document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
		}
		else
		{
			document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
		}
	}
	</script>
	</head>
	<body>
	<p><button onclick="clickCounter()" type="button">点我！</button></p>
	<div id="result"></div>
	</head>
</html>

3. 用Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage；
根据网站名，查找网址；
列出当前已保存的所有网站；

实现效果如下

实现脚本如下

<!DOCTYPE html>
<!--

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

-->
<html>
<head>
	<meta charset="utf-8">  
    <title>HTML5本地存储之Web Storage篇</title>  
</head>
<body>
	 <div style="border: 2px dashed #ccc;width:320px;text-align:center;">  
		<label for="sitename">网站名(siename)</label>
		<input type="text" id="sitename" name="sitename" class="text"/>
		<br/>  
		<label for="siteurl">网址(url)</label>
		<input type="text" id="siteurl" name="siteurl"class="text"/>
		<button id="button" onclick="savedata()">保存网址和网站名</button>
		<br/>
		<hr/>
		<label for="sitename">输入网站名(siename)</label>
		<input type="text" id="search_site" name="search_site" class="text"/>
		<button id="button" onclick="find_site()">查找保存网址</button>
		<p id = "display"></p>
	</div>
	<br/>
	<div id="list"></div>
	
	
	<script>
	//将所有存储在localStorage中的对象提取出来，并展现到界面上
	loadALL()
	
	//保存数据
	function savedata()
	{
		sitename = document.getElementById("sitename").value;
		siteurl  = document.getElementById("siteurl").value;
		localStorage.setItem(sitename,siteurl);
		alter("保存成功")	
	}
	
	//将所有存储在localStorage中的对象提取出来，并展现到界面上
	function loadALL()
	{
		var list = document.getElementById("list");
		if(localStorage.length>0)
		{
			var result = "<table border='1'>"; 
			result += "<tr><td>sitename</td><td>siteurl</td></tr>";
			for(var i = 0; i<localStorage.length; ++i)
			{
				var sitename = localStorage.key(i);
				var siteurl  = localStorage.getItem(sitename); 
				result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>"; 
			}
			result += "</table>"; 
			list.innerHTML=result;
		}
		else
		{
			list.innerHTML = "数据为空……";  
		}
	}
	
	//查找网站
	function find_site()
	{
		var sitename = document.getElementById("search_site").value;
		var siteurl = localStorage.getItem(sitename);
		var x = document.getElementById("display");
		x.innerHTML = sitename + "的网址是" + siteurl;
	}
	</script>
</body>
</html>

FengNingXueChen

关注

0
点赞
踩
0

收藏

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

什么是 HTML5 Web 存储?使用HTML5可以在本地存储用户的浏览数据。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以键/值对存在, web网页的数据只允许该网页访问使用。1. localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。在使用 web 存储前,应检查浏...
复制链接

扫一扫