HTML5 Web儲存 頁面間進行傳值

CyuanWu發表於2018-10-13
HTMLWeb

在實際使用過程中，經常會遇到需要在頁面間進行傳值的情況，最初設想一定需要後端才能進行資料的儲存和讀取，或者在本地使用一個cookie進行儲存，直到了解到HTML5 Web儲存

使用HTML5的新特性可以在本地儲存使用者的瀏覽資料。相比之前的cookie，Web 儲存更加的安全與快速. 這些資料不會被儲存在伺服器上，資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能.

資料以“鍵/值”對存在, web網頁的資料只允許該網頁訪問使用

方法： localStorage 和 sessionStorage （客戶端儲存）

  • localStorage – 用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去除。
  • sessionStorage – 用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。

在使用 web 儲存前,檢查瀏覽器是否支援 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 支援 localStorage  sessionStorage 物件
    // 事件函式
} else {
    // 不支援 web 儲存。
}

（只要不是老掉牙的IE，基本沒問題的，現在的瀏覽器都支援H5的）

寫的一個小demo，用於理解：在第一個頁面中輸入，跳轉後第二個頁面上讀取資料

<form>
    <fieldset id="submit">
        <input type="text" id="one"  name="one"></select>
        <input type="text" id="two"  name="two">
        <input type="button" value="submit" onclick="submit()">
    </fieldset>
</form>    
function submit(){
    if(document.getElementById("submit").value!=""){
        var Key=document.getElementById("submit");
        localStorage.name = Key.value;
        location.href = `index.html`;
    }else{
        alert("error");
    }
}
//index.html中
<script>
    //讀取儲存結果
    var searchKey = localStorage["name"];
</script>

 另菜鳥教程上有一個demo，個人感覺很不錯：

<div>     
    <label for="sitename">網站名(key)：</label>  
    <input type="text" id="sitename" name="sitename" class="text"/>  
     
    <label for="siteurl">網址(value)：</label>  
    <input type="text" id="siteurl" name="siteurl"/>  
   
    <input type="button" onclick="save()" value="新增記錄"/>  
    
    <label for="search_site">輸入網站名：</label>  
    <input type="text" id="search_site" name="search_site"/>  

    <input type="button" onclick="find()" value="查詢網站"/>  
    <p id="find_result"><br/></p>  
</div>
//儲存資料  
function save(){  
    var siteurl = document.getElementById("siteurl").value;  
    var sitename = document.getElementById("sitename").value;  
    localStorage.setItem(sitename, siteurl);
    alert("新增成功");
}
//查詢資料  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var sitename = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");  
    find_result.innerHTML = search_site + "的網址是：" + sitename;  
}

參考連結：

菜鳥教程：http://www.runoob.com/html/html5-webstorage.html

w3school: http://www.w3school.com.cn/html5/html_5_webstorage.asp

相關文章