sessionStorge和localStorage的使用-踩坑記_09

Jochen 發(fā)布于2019-08-23 13:41 / 2751人閱讀

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

sessionStorge的使用

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

語法

// 保存數(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ì)在頁面偶然被刷新的情況下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢復(fù)文本輸入框的內(nèi)容
  field.value = sessionStorage.getItem("autosave");
}
 
// 監(jiān)聽文本輸入框的 change 事件
field.addEventListener("change", function() {
  // 保存結(jié)果到 sessionStorage 對(duì)象中
  sessionStorage.setItem("autosave", field.value);
});

localStorage的使用

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

語法

//設(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://systransis.cn/yun/99399.html

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

登陸后可評(píng)論

0條評(píng)論

Jochen

男|高級(jí)講師

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

TA的文章

vggnet

閱讀 1877·2023-04-26 02:46
微信和QQ這么多群，該如何管理好友關(guān)系？

閱讀 2009·2021-11-25 09:43
零基礎(chǔ)學(xué)習(xí)軟件測(cè)試難不難？

閱讀 1150·2021-09-29 09:35
CCS 盒模型分析

閱讀 2107·2019-08-30 15:56
HTML實(shí)現(xiàn)2列布局，左側(cè)寬度固定，右側(cè)自適應(yīng)

閱讀 3431·2019-08-30 15:54
Slog31_支配vue框架初階項(xiàng)目之博客網(wǎng)站-注冊(cè)頁面-風(fēng)格

閱讀 2640·2019-08-29 16:35
TP5+阿里云OSS上傳文件第三節(jié),實(shí)現(xiàn)淘寶上傳商品圖片

閱讀 3127·2019-08-29 15:25
雙十二大前端工程師讀書清單

閱讀 3298·2019-08-29 14:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

sessionStorge和localStorage的使用-踩坑記_09

相關(guān)文章