Home >Web Front-end >H5 Tutorial >About the difference between HTML5 localStorage and sessionStorage
HTML5 provides two web storage methods, localStorage and sessionStorage
The difference between localStorage and sessionStorage
localStorage has no expiration time. The data will be saved as long as it is not cleared or removed.
sessionStorage stores data for a session. The life cycle is the same as the session. When the user closes the browser, the data will be deleted.
Features:
1.The default supported capacity of localStorage is one station5M, when calling setItem exceeds the upper limit, the QuotaExceededError exception will be triggered. Of course, some browsers support modifying the upper capacity limit, but in order to be compatible with other browsers, it is best to use the 5M capacity.
2.localStorage saves data in the form of key-value, and key and value can only be in string format. Therefore, after the number 1 is saved, it will be converted into a string 1.
3.The writing and reading methods of localStorage are as follows:
localStorage.name = 'fdipzone'; name = localStorage.name; localStorage['name'] = 'fdipzone'; name = localStorage['name']; localStorage.setItem('name', 'fdipzone'); name = localStorage.getItem('name');
localStorage[key] The = value writing method is supported by all mainstream browsers, but the official has not stated which writing method is the standard. But if you execute the following code, localStorage will become invalid.
localStorage.setItem = null; localStorage.getItem = null; localStorage.removeItem = null; localStorage.clear = null;
Therefore, it is recommended to use setItem(), getItem(), removeItem(), clear() to implement writing, reading, deleting and clearing.
4.If you want to save non-string content, it is recommended to use JSON for processing. When writing data, use JSON.stringify to convert it into a string, and when reading data, use JSON.parse to convert the string into the previous format.
Example 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Local Storage and Session Storage </title>
</head>
<body>
<p>姓名:<input type="text" name="name" id="name"></p>
<p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
<p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="removeBtn" value="remove name"> <input type="button" id="clearBtn" value="clear"> </p>
<script type="text/javascript">
var oStorage = window.localStorage;
function $(id){
return document.getElementById(id);
}
// 保存数据
$('saveBtn').onclick = function(){
oStorage.setItem('name', $('name').value);
if($('gender1').checked==true){
oStorage.setItem('gender', 1);
}else if($('gender2').checked==true){
oStorage.setItem('gender', 2);
}
}
// 获取数据
$('getBtn').onclick = function(){
$('name').value = oStorage.getItem('name');
if(oStorage.getItem('gender')==1){
$('gender1').checked = true;
}else if(oStorage.getItem('gender')==2){
$('gender2').checked = true;
}
}
// 删除数据name
$('removeBtn').onclick = function(){
oStorage.removeItem('name');
}
// 清空数据
$('clearBtn').onclick = function(){
oStorage.clear();
}
</script>
</body>
</html>
Example 2: Using JSON.stringify Encapsulate data with JSON.parse
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Local Storage and Session Storage </title>
</head>
<body>
<p>姓名:<input type="text" name="name" id="name"></p>
<p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
<p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="clearBtn" value="clear"> </p>
<script type="text/javascript">
var oStorage = window.localStorage;
function $(id){
return document.getElementById(id);
}
// 保存数据
$('saveBtn').onclick = function(){
var name = $('name').value;
var gender;
if($('gender1').checked==true){
gender = 1;
}else if($('gender2').checked==true){
gender = 2;
}
var data = {};
data['name'] = name;
data['gender'] = gender;
oStorage.setItem('data', JSON.stringify(data));
}
// 获取数据
$('getBtn').onclick = function(){
var data = JSON.parse(oStorage.getItem('data'));
if(data){
var name = data['name'];
var gender = data['gender'];
$('name').value = name;
if(gender==1){
$('gender1').checked = true;
}else if(gender==2){
$('gender2').checked = true;
}
}
}
// 清空数据
$('clearBtn').onclick = function(){
oStorage.clear();
}
</script>
</body>
</html>
Listen to the value of localStorage and synchronize the page data when changes occur
When calling setItem(), removeItem(), clear(), you can listen to these events to facilitate data updating between different pages.
// 监听数据变化,当数据发生变化时,同步数据显示
window.onstorage = function(event){
var status = {}
status.key = event.key;
status.oldValue = event.oldValue;
status.newValue = event.newValue;
status.url = event.url;
status.storage = event.storageArea;
// 执行同步数据处理...
}This article explains the difference between HTML5 localStorage and sessionStorage. For more related content, please pay attention to the php Chinese website.
Related recommendations:
Explanation on content comparison of php zip files
How to get/set the language class of the user access page through php
Calculate the relative path between two files through php method
The above is the detailed content of About the difference between HTML5 localStorage and sessionStorage. For more information, please follow other related articles on the PHP Chinese website!