sessionStorge和localStorage的使用-踩坑記_09

PrototypeZ 發(fā)布于2019-08-02 12:06 / 2412人閱讀

摘要：的使用屬性允許你訪問(wèn)一個(gè)對(duì)象。它與相似，不同之處在于里面存儲(chǔ)的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間設(shè)置，而存儲(chǔ)在里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除。頁(yè)面會(huì)話在瀏覽器打開(kāi)期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。

sessionStorge的使用

sessionStorage 屬性允許你訪問(wèn)一個(gè) session Storage 對(duì)象。它與 localStorage 相似，不同之處在于 localStorage 里面存儲(chǔ)的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間設(shè)置，而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除。頁(yè)面會(huì)話在瀏覽器打開(kāi)期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。在新標(biāo)簽或窗口打開(kāi)一個(gè)頁(yè)面時(shí)會(huì)在頂級(jí)瀏覽上下文中初始化一個(gè)新的會(huì)話，這點(diǎn)和 session cookies 的運(yùn)行方式不同

語(yǔ)法

// 保存數(shù)據(jù)到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage獲取數(shù)據(jù)
var data = sessionStorage.getItem("key");

// 從sessionStorage刪除保存的數(shù)據(jù)
sessionStorage.removeItem("key");

// 從sessionStorage刪除所有保存的數(shù)據(jù)
sessionStorage.clear();

例子

// 獲取文本輸入框
var field = document.getElementById("field");
 
// 檢測(cè)是否存在 autosave 鍵值
// (這個(gè)會(huì)在頁(yè)面偶然被刷新的情況下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢復(fù)文本輸入框的內(nèi)容
  field.value = sessionStorage.getItem("autosave");
}
 
// 監(jiān)聽(tīng)文本輸入框的 change 事件
field.addEventListener("change", function() {
  // 保存結(jié)果到 sessionStorage 對(duì)象中
  sessionStorage.setItem("autosave", field.value);
});

localStorage的使用

只讀的localStorage 允許你訪問(wèn)一個(gè)Document 的遠(yuǎn)端（origin）對(duì)象 Storage；數(shù)據(jù)存儲(chǔ)為跨瀏覽器會(huì)話。 localStorage 類似于sessionStorage。區(qū)別在于，數(shù)據(jù)存儲(chǔ)在 localStorage 是無(wú)期限的，而當(dāng)頁(yè)面會(huì)話結(jié)束——也就是說(shuō)當(dāng)頁(yè)面被關(guān)閉時(shí),數(shù)據(jù)存儲(chǔ)在sessionStorage 會(huì)被清除

語(yǔ)法

//設(shè)定
localStorage.setItem("myCat", "Tom")
//讀取
let cat = localStorage.getItem("myCat");
//移除
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();

例子

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}

云服務(wù)器 GPU云服務(wù)器踩坑記 localstorage使用采坑記 sessionStorge

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/53344.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

PrototypeZ

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

EasyUI項(xiàng)目之購(gòu)物車功能

閱讀 2536·2021-10-12 10:11
寫了兩年代碼之后再來(lái)看看Spring中的Bean

閱讀 1287·2021-10-11 10:58
css布局基礎(chǔ)總結(jié)

閱讀 3352·2019-08-30 15:54
前端不能放棄1200px的理由

閱讀 782·2019-08-30 13:59
一個(gè)用于學(xué)習(xí)的react項(xiàng)目

閱讀 728·2019-08-29 13:07
ES6之函數(shù)的擴(kuò)展(一)

閱讀 1473·2019-08-26 11:55
vue源碼解析：nextTick

閱讀 2206·2019-08-26 10:44
vue 使用v-for動(dòng)態(tài)生成的ref不能通過(guò)this.refs.name獲取到內(nèi)容

閱讀 2769·2019-08-23 18:25

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

sessionStorge和localStorage的使用-踩坑記_09

相關(guān)文章