Html5的學習之旅-Html5的web Storage概述（16）
- 黄舟原創
- 2017-02-17 14:49:581351瀏覽
在html5中除了canvas，另外一個非常重要的功能是客戶端本地存儲web storage，之前可以在用戶端Cookies存貯用戶名等信息，後來發現Cookies存儲存在以下問題：
大小：Cookies的大小被限制在4kb左右
頻寬：Coolies是隨著Http業務被一起發送的，因此會浪費一部分頻寬
複雜性：要正確的操作Cookies是很苦難的
針對以上問題，html5提出了一種在本地保存資料的方法：web storage
它有兩種處理方式：
session storage：將資料保存在session物件中。 session是使用者開啟這個網站到關閉這個網站，所經歷的時間，也就是使用者瀏覽網站的時間。 session物件可以保存這段時間所有的資料。
local storage：將資料保存在客戶端的硬體（硬碟）中，即使使用者的瀏覽器關閉了。下次開啟時候，也會重新載入
session storage實例
index.html程式碼
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script></head><body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>appWeb程式碼
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}！ ！ ！ ！效果圖
local storage的實例
index程式碼沒變，js程式碼
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}效果圖
storage，之前可以在用戶端Cookies存貯用戶名等信息，後來發現Cookies存儲存在以下問題：
大小：Cookies的大小被限制在4kb左右
頻寬：Coolies是隨著Http業務一起發送的，因此會浪費一部分頻寬
複雜性：要正確的操作Cookies是很苦難的
針對以上問題，html5提出了一種在本地保存資料的方法：web storage
它有兩種處理方式：
session storage：將資料保存在session物件中。 session是使用者開啟這個網站到關閉這個網站，所經歷的時間，也就是使用者瀏覽網站的時間。 session物件可以保存這段時間所有的資料。
local storage：將資料保存在客戶端的硬體（硬碟）中，即使使用者的瀏覽器關閉了。下次開啟時候，也會重新載入
session storage實例
index.html程式碼
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script></head><body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>appWeb程式碼
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}！ ！ ！ ！效果圖
local storage的實例
index程式碼沒變，js程式碼
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}效果圖
ml的內容為「3t」多相關內容請關注PHP中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn