HTML5 提供了兩種新物件 可在客戶端儲存資料
以下為 sessionStorage 使用範例(使用者關閉瀏覽器時其值會被清空)
1. localStorage - 無時間限制的儲存資料
2. sessionStorage - 將資料儲存於 Session
早期這些動作是利用 Cookies 來達成，但 Cookies 不適用於大量的資料，因為每次的 Request 都會將 Cookies 送出，要是儲存於 Cookies 的資料量很大，則會導致執行效能變得非常慢。
HTML5 中， 這些資料不需要於每次的 Request 都隨著送出，只有被要求時才會使用，達到可儲存大量資料亦不會拖垮效能的效果。
不同網站的資料儲存於不同的位置，而各網站只能存取自己儲存的資料。
HTML5 使用 Javascript 來儲存及存取這些資料。
以下為 localStorage 使用範例(無時間限制)
<script type="text/javascript">
// 建立 localStorage 的 lastname 屬性並指定值
localStorage.lastname="Smith";
// 輸出 localStorage 的 lastname 屬性所儲存的值
document.write(localStorage.lastname);
</script>
以下範例為到訪網頁的計次功能
<script type="text/javascript">
// 若 localStorage 的 pagecount 屬性存在則直接加 1, 不存在則指定 1
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
// 輸出到訪次數
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
<script type="text/javascript">
// 建立 sessionStorage 的 lastname 屬性並指定值
sessionStorage.lastname="Smith";
// 輸出 sessionStorage 的 lastname 屬性所儲存的值
document.write(sessionStorage.lastname);
</script>
以下範例為到訪網頁的計次功能
<script type="text/javascript">
// 若 sessionStorage 的 pagecount 屬性存在則直接加 1, 不存在則指定 1
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
// 輸出到訪次數
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
全站熱搜
留言列表
Technology (30)
