Home > Article > Web Front-end > HTML5 web page storage

HTML5 web page storage

零到壹度Original: 2018-03-26 14:29:151507browse

This time I will bring you HTML5 web page storage and what are the precautions for HTML5 web page storage. The following is a practical case, let’s take a look.

HTML5 Web StorageWeb Storage

1. Understanding Web Storage

Web Storage is a technology that stores small amounts of data on the client's disk. As long as the browser supports the WebStorage API specification, web designers can use JavaScript to operate it. Let's first understand Web Storage.

The capacity of Web Storage is determined by the client browser, usually 1MB~5MB.

Web Storage purely runs the client and does not send each web page request to the server.

Web Storage stores data in a set of key-value pairs.

Web Storage provides two ways to save data on the client: one is localStorage and the other is sessionStorage. The difference between the two lies in the declaration period and valid range.

**Table 1 Differences in Web Storage Types**
Web Storage Type	Life Cycle	Valid Range
localStorage	It will disappear when you execute the delete command	Same website Web pages can span windows and paginations
sessionStorage	The browser window or tab will disappear when it is closed	Only valid for the current browser window or pagination

Check whether the browser supports Web Storage, the syntax is as follows:

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

Note: required for IE and Firefox testing Upload the file to the server or localhost to run. It is recommended to use Google Chrome browser when testing.

2. Specific learning

1. Access localStorage

The same website means that the protocol, host (domain and ip), and transmission port (port) must be the same.

WebStorageOnly allows storage of string data, there are the following 3 methods to access localStorage, the previous window does not need to be written

Storage object’s setItem and getItem methods (key: "userdata", value: "Hello World" )

Storage: window.localStorage.setItem(key, value);
Read: var v = window.localStorage.getItem(key);

##Array index

Storage: window.localStorage[key] =value;
Read: var v = window.localStorage[key];

##Properties

Storage: window.localStorage.
key =value;
Read: var v = window.localStorage.
key ;

<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>

2. Delete localStorage

If you want to delete a certain piece of localStorage data, you can call the removeItem method or delete attribute to delete it.

window.localStorage.removeItem("userdata");

delete window.localStorage.userdata;

delete.window.localStorage["userdata"];

To delete all localStorage data, you can use the clear() method.

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>

HTML5 web page storage

3. Access sessionStorage

setItem
(key,value);##window.sessionStorage [
key
] = [value];
window.sessionStorage.key= value;

读取

var v = window.sessionStorage.getItem(key);
var v = window.sessionStorage [key];
var v = window.sessionStorage.key;

清除

window.sessionStorage.removeItem(key);
delete window.sessionStorage.key;
delete window.sessionStorage [key];
//全部清除
sessionStorage.clear();

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>网页存储sessionStorage</title>
<script type="text/javascript">
function onLoad(){
	inputSpan.style.display = &#39;none&#39;;
	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 = &#39;none&#39;;	/*隐藏“登录”按钮*/
				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 = &#39;&#39;;
}
function clearLocalStorage(){
	localStorage.clear();		/*情况localStorage*/
	show_LocalStorage.innerHTML = "已成功注销！";
	btn_login.style.display = &#39;&#39;;	/*显示“登录”按钮*/
	inputSpan.style.display = &#39;&#39;;	/*显示姓名输入框和“提交”按钮*/
}
</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;

The above is the detailed content of HTML5 web page storage. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 combined with canvas to achieve image compressionNext article：HTML5 combined with canvas to achieve image compression

See more

HTML5 web page storage

Related articles