Html5的學習之旅-Html5的web Storage概述（16）-H5教程-PHP中文網

Html5的學習之旅-Html5的web Storage概述（16）

黄舟

發布： 2017-02-17 14:49:58

原創

1392 人瀏覽過

在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(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></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;
}

登入後複製

！！！！效果圖

Html5的學習之旅-Html5的web Storage概述（16）

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

登入後複製

效果圖

Html5的學習之旅-Html5的web Storage概述（16） 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(&#39;input&#39;)">
    <input type="button" value="读取数据" onclick="loadStorage(&#39;msg&#39;)"></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;
}

登入後複製

！！！！效果圖

Html5的學習之旅-Html5的web Storage概述（16） 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;
}

登入後複製