首页技术文章正文

WEB前端培训之web Storage可让网页将资料存于本地端的技术2

更新时间:2017-06-09 来源:黑马程序员web前端培训学院 浏览量:

从 Storage 中读取资料时,则用 getItem 方法:
var value1 = window.localStorage.getItem("MyKeyName");
 
var value2 = window.sessionStorage.getItem("MyKeyName");
  在使用 Storage 物件时,前面的 "window" 也可以省略不写,而且还可以用阵列索引以及属性的写法,因此底下的程式片段的每一行作用皆相同:
  window.localStorage.setItem("MyKeyName", "MyDataValue");



localStorage.setItem("MyKeyName", "MyDataValue");
 
localStorage["MyKeyName"] = "Hello";
 
localStorage.MyKeyName = "Hello";
  储存在 Web Storage 裡面的资料都可以跨页面,也就是说,使用者点进去某个网页之后,先前由上一个网页所储存于 Web Storage 的资料,都可以在后续的网页中取得。
  注意:有些浏览器可能允许你存入字串之外的型别,但 HTML5 的标准是只能存入字串。
  清除
  唿叫 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">储存到 local 于 session storage</button>
 
    <button id="btnLoadFromLocalStorage">从 local storage 载入资料</button>
 
    <button id="btnLoadFromSessionStorage">从 session storage  载入</button>
 
</body>
 
</html>
本文版权归黑马程序员web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:黑马程序员web前端培训学院;
首发:http://web.itheima.com/ 
分享到:
在线咨询 我要报名
和我们在线交谈!