全国咨询/投诉热线:400-618-9090

首页技术文章正文

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/ 

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名