明辉站/网站教程/内容

HTML5之页面存储

网站教程2023-09-08 阅读
[摘要]这次给大家带来HTML5之网页存储 ,HTML5之网页存储 的注意事项有哪些,下面就是实战案例,一起来看一下。HTML5 网页存储 Web Storage一、认识Web StorageWeb Storage是一种将少量数据存储在客户端(client)磁盘的技术。只要支持WebStorage API...
这次给大家带来HTML5之网页存储 ,HTML5之网页存储 的注意事项有哪些,下面就是实战案例,一起来看一下。

HTML5 网页存储 Web Storage

一、认识Web Storage

Web Storage是一种将少量数据存储在客户端(client)磁盘的技术。只要支持WebStorage API规格的浏览器,网页设计者都可以使用JavaScript来操作它,我们先了解一下Web Storage。

Web Storage的容量由客户端浏览器决定,通常1MB~5MB。

Web Storage纯粹运行客户端,不会每次网页请求连带发送给服务端。

Web Storage以一组key-value对应保存数据。

Web Storage提供两种方式将数据保存在客户端:一种是localStorage,一种是sessionStorage,两者的差异在于申明周期和有效范围。

表一 Web Storage类型的差异
Web Storage类型生命周期有效范围
localStorage执行删除命令时才会消失同一网站的网页可以跨窗口和分页
sessionStorage浏览器窗口或分页(tab)关闭就会消失仅对当前浏览器窗口或分页有效

检测浏览器是否支持Web Storage,语法如下:

if(typeof(Storage)=="undefined"){
<span style="white-space:pre">	</span>alert("您的浏览器不支持Web Storage");
}
else{
<span style="white-space:pre">	</span>//localStorage和sessionStorage程序代码
}

注意:IE和Firefox测试时需要把文件上传到服务器或者localhost才能运行。建议测试时使用Google Chrome浏览器。

二、具体学习

1、访问localStorage

相同网站是指:协议、主机(domain与ip)、传输端口(port)都必须相同。

WebStorage只允许存储字符串数据,有以下3种访问localStorage的方法,前面的window可以不写

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry!你的浏览器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
	}
}

function saveToLocalStorage(){
	<strong>localStorage.username = inputname.value;</strong>
}
function loadFromLocalStorage(){
	<strong>show_LocalStorage.innerHTML = localStorage.username+"你好,欢迎来到我的网站!";</strong>
}
</script>
</head>

<body onload="onLoad()">
请输入你的姓名:<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>

</body>
</html></span><span style="font-size: 18px;">
</span>

二、删除localStorage

要想删除某一条localStorage数据,可以调用removeItem方法或者delete属性进行删除。

window.localStorage.removeItem("userdata");

delete window.localStorage.userdata;

delete.window.localStorage["userdata"];

要想删除全部的localStorage数据,可以使用clear()方法。

localStorage.clear();

<!DOCTYPE html>
<html>
<head>
<title>网页存储localStorage</title>
<script type="text/javascript">
function onLoad(){
	if(typeof(Storage)=="undefined"){
		alert("Sorry!你的浏览器不支持Web Storage");
	}
	else{
		btn_save.addEventListener("click",saveToLocalStorage);
		btn_load.addEventListener("click",loadFromLocalStorage);
		btn_clear.addEventListener("click",clearLocalStorage);
	}
}

function saveToLocalStorage(){
	localStorage.username = inputname.value;
}
function loadFromLocalStorage(){
	show_LocalStorage.innerHTML = localStorage.username+"你好,欢迎来到我的网站!";
}
function clearLocalStorage(){
	<strong>localStorage.clear();</strong>
	show_LocalStorage.innerHTML = localStorage.username;
}
</script>
</head>

<body onload="onLoad()">
请输入你的姓名:<input type="text" id="inputname" value="" /><br/>
<p id="show_LocalStorage"></p><br />
<button id="btn_save">存储到localStorage</button>
<button id="btn_load">从localStorage读取数据</button>
<button id="btn_clear">清除localStorage数据</button>

</body>
</html>

20d778d6ea2e72c0debf96707138b93d_Center.jpg

三、访问sessionStorage

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储sessionStorage</title>
<script type="text/javascript">
function onLoad(){
	inputSpan.style.display = 'none';
	if(typeof(Storage)=="undefined"){
		alert("Sorry!你的浏览器不支持Web Storage");
	}
	else{
		/*判断姓名是否已经存入localStorage,已存入时才执行{ }内的命令*/
		if(localStorage.username){
			/*数据不存在时返回undefined*/
				if(!localStorage.counter){
					localStorage.counter = 1;	/*初始值设为1*/
				}
				else{
					localStorage.counter++;		/*递增*/
				}
				btn_login.style.display = 'none';	/*隐藏“登录”按钮*/
				show_LocalStorage.innerHTML = localStorage.username+"你好,这是你第"+localStorage.counter+"次来到网站";
		}
		btn_login.addEventListener("click",login);
		btn_send.addEventListener("click",sendok);
		btn_logout.addEventListener("click",clearLocalStorage);
	}
}

function sendok(){
	localStorage.username = inputname.value;
	location.reload();		/*重载网页*/
}
function login(){
	inputSpan.style.display = '';
}
function clearLocalStorage(){
	localStorage.clear();		/*情况localStorage*/
	show_LocalStorage.innerHTML = "已成功注销!";
	btn_login.style.display = '';	/*显示“登录”按钮*/
	inputSpan.style.display = '';	/*显示姓名输入框和“提交”按钮*/
}
</script>
</head>

<body onload="onLoad()">
<button id="btn_login">登录</button>
<button id="btn_logout">注销</button><br />
<span id="inputSpan">请输入你的姓名:<input type="text" id="inputname" value="" /><button id="btn_send">提交</button></span><br />
<p id="show_LocalStorage"></p><br />
</body>
</html></span><span style="font-weight: bold; font-size: 24px;">
</span>


注:JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"

上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就会出现”11111......“

JavaScript将字符串转换成为数字可以用Number()方法,localStorage.counter =Number(localStorage.counter )+1;

以上就是HTML5之网页存储 的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读