首頁技術(shù)文章正文

WEB前端培訓(xùn)之web Storage可讓網(wǎng)頁將資料存于本地端的技術(shù)2

更新時(shí)間:2017-06-09 來源:黑馬程序員web前端培訓(xùn)學(xué)院 瀏覽量:

從 Storage 中讀取資料時(shí),則用 getItem 方法:
var value1 = window.localStorage.getItem("MyKeyName");
 
var value2 = window.sessionStorage.getItem("MyKeyName");
  在使用 Storage 物件時(shí),前面的 "window" 也可以省略不寫,而且還可以用陣列索引以及屬性的寫法,因此底下的程式片段的每一行作用皆相同:
  window.localStorage.setItem("MyKeyName", "MyDataValue");



localStorage.setItem("MyKeyName", "MyDataValue");
 
localStorage["MyKeyName"] = "Hello";
 
localStorage.MyKeyName = "Hello";
  儲(chǔ)存在 Web Storage 裡面的資料都可以跨頁面,也就是說,使用者點(diǎn)進(jìn)去某個(gè)網(wǎng)頁之后,先前由上一個(gè)網(wǎng)頁所儲(chǔ)存于 Web Storage 的資料,都可以在后續(xù)的網(wǎng)頁中取得。
  注意:有些瀏覽器可能允許你存入字串之外的型別,但 HTML5 的標(biāo)準(zhǔn)是只能存入字串。
  清除
  唿叫 removeItem 方法可以移除某一筆資料,例如:
localStorage.removeItem("MyKeyName");
  如果要清除 Storage 物件中的全部資料,可用 clear 方法。
 
范例代碼:
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <title></title>
 
    <script src="Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
 
    <script type="text/javascript">
 
        function onLoad() {
 
            outputArea.value = window.localStorage.remainingSpace;
 
 
 
            btnSave.addEventListener("click", saveToStorage);
 
            btnLoadFromLocalStorage.addEventListener("click", loadFromLocalStorage);
 
            btnLoadFromSessionStorage.addEventListener("click", loadFromSessionStorage);
 
        }
 
 
 
        function saveToStorage() {
 
            //window.localStorage.setItem("UserData", inputArea.value);
 
            //localStorage.setItem("UserData", inputArea.value);
 
            //localStorage["UserData"] = inputArea.value;
 
            localStorage.UserData = inputArea.value;
 
            sessionStorage.UserData = inputArea.value;
 
        }
 
 
 
        function loadFromLocalStorage() {
 
            outputArea.value = localStorage["UserData"];
 
        }
 
 
 
        function loadFromSessionStorage() {
 
            outputArea.value = sessionStorage["UserData"];
 
        }
 
    </script>
 
</head>
 
<body onload="onLoad()">
 
    Input: <textarea id="inputArea"></textarea>
 
    Output: <textarea id="outputArea"></textarea>
 
     
 
 
 
 
 
    <button id="btnSave">儲(chǔ)存到 local 于 session storage</button>
 
    <button id="btnLoadFromLocalStorage">從 local storage 載入資料</button>
 
    <button id="btnLoadFromSessionStorage">從 session storage  載入</button>
 
</body>
 
</html>
本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/ 
分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!