關於HTML5 localStorage and sessionStorage 之間的差異
- jacklove原創
- 2018-06-09 13:51:502987瀏覽
HTML5 提供兩種web存儲方法，localStorage 與sessionStorage
#localStorage 與sessionStorage 區別
#localStorage沒有過期時間，只要不clear或remove，資料就會一直保存。 sessionStorage 針對一個session進行資料存儲，生命週期與session相同，當使用者關閉瀏覽器後，資料將被刪除。
特點：
#1.localStorage 預設支援的容量為一個站5M，當呼叫setItem超過上限時，就會觸發
QuotaExceededError異常。當然有些瀏覽器支援修改容量上限，但為了相容其他瀏覽器，最好以5M的容量來使用。
2.localStorage 是以key-value形式儲存資料的，key和value只能是字串格式。因此數字1保存後，會轉換成字串1。
3.localStorage 的寫入與讀取寫入法有以下幾種：localStorage.name = 'fdipzone';
name = localStorage.name;
localStorage['name'] = 'fdipzone';
name = localStorage['name'];
localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');
localStorage[key] = value寫法主流瀏覽器都支持，官方並沒有說明那一種寫法是標準。但如果執行以下的程式碼就使localStorage失效。
localStorage.setItem = null; localStorage.getItem = null; localStorage.removeItem = null; localStorage.clear = null;因此，建議使用setItem(), getItem(), removeItem(), clear()來實作寫入，讀取，刪除，清除。
4.如果要儲存非字串的內容，建議使用JSON來處理。寫入資料時用JSON.stringify
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="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>
範例2：
使用JSON.stringify和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>
// 监听数据变化,当数据发生变化时,同步数据显示
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;
// 执行同步数据处理...
}######本篇文章講解了關於HTML5 localStorage and sessionStorage 之間的區別，更多相關內容請關注php中文網。 ############相關推薦：############關於php zip檔內容比較類別的講解############## #######如何透過php 取得/設定使用者存取頁面語言類別######################透過php 計算兩個檔案之間的相對路徑方法###############以上是關於HTML5 localStorage and sessionStorage 之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！