石頭智能洗地機(jī)A10 Plus體驗(yàn)：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機(jī)A10 Plus。從這個產(chǎn)品名上就不難看出，這次石頭推出的并不是常見的掃地機(jī)器
Storage 接口用于腳本在瀏覽器保存數(shù)據(jù)。兩個對象部署了這個接口：window.sessionStorage和window.localStorage。
Storage.setItem()方法用于存入數(shù)據(jù)。它接受兩個參數(shù)，第一個是鍵名，第二個是保存的數(shù)據(jù)。如果鍵名已經(jīng)存在，該方法會更新已有的鍵值。該方法沒有返回值。
window.sessionStorage.setItem('key', 'value');window.localStorage.setItem('key', 'value');
注:
Storage.setItem()兩個參數(shù)都是字符串。如果不是字符串，會自動轉(zhuǎn)成字符串，再存入瀏覽器。
window.sessionStorage.setItem(3, { foo: 1 });window.sessionStorage.getItem('3') // "[object Object]"
代碼解析：
setItem方法的兩個參數(shù)都不是字符串，但是存入的值都是字符串。
如果儲存空間已滿，該方法會拋錯，寫入不一定要用這個方法，直接賦值也是可以的。
Storage.getItem()方法用于讀取數(shù)據(jù)。它只有一個參數(shù)，就是鍵名。如果鍵名不存在，該方法返回null。
window.sessionStorage.getItem('key')window.localStorage.getItem('key')鍵名應(yīng)該是一個字符串，否則會被自動轉(zhuǎn)為字符串。
Storage.key()接受一個整數(shù)作為參數(shù)（從零開始），返回該位置對應(yīng)的鍵值。
window.sessionStorage.setItem('key', 'value');window.sessionStorage.key(0) // "key"
結(jié)合使用Storage.length屬性和Storage.key()方法，可以遍歷所有的鍵。
for (var i = 0; i < window.localStorage.length; i++) { console.log(localStorage.key(i));}
Storage 接口儲存的數(shù)據(jù)發(fā)生變化時，會觸發(fā) storage 事件，可以指定這個事件的監(jiān)聽函數(shù)。
window.addEventListener('storage', onStorageChange);監(jiān)聽函數(shù)接受一個event實(shí)例對象作為參數(shù)。這個實(shí)例對象繼承了 StorageEvent 接口，有幾個特有的屬性，都是只讀屬性。
屬性 | 解析 |
StorageEvent.key | 字符串，表示發(fā)生變動的鍵名。如果 storage 事件是由clear()方法引起，該屬性返回null。 |
StorageEvent.newValue | 字符串，表示新的鍵值。如果 storage 事件是由clear()方法或刪除該鍵值對引發(fā)的，該屬性返回null。 |
StorageEvent.oldValue | 字符串，表示舊的鍵值。如果該鍵值對是新增的，該屬性返回null。 |
StorageEvent.storageArea | 對象，返回鍵值對所在的整個對象。也說是說，可以從這個屬性上面拿到當(dāng)前域名儲存的所有鍵值對。 |
StorageEvent.url | 字符串，表示原始觸發(fā) storage 事件的那個網(wǎng)頁的網(wǎng)址。 |
重寫localStorage的方法, 拋出自定義的事件
<!DOCTYPE html><html> <head lang="en"> <title>A</title> </head> <body> <script> var orignalSetItem = localStorage.setItem; localStorage.setItem = function(key, newValue) { var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; window.dispatchEvent(setItemEvent); orignalSetItem.apply(this, arguments); } window.addEventListener("setItemEvent", function(e) { alert(e.newValue); }); localStorage.setItem("nm", "1234");</script> </body></html>
注：
如果瀏覽器只打開一個窗口，可能觀察不到這個事件。
比如同時打開多個窗口，當(dāng)其中的一個窗口導(dǎo)致儲存的數(shù)據(jù)發(fā)生改變時，只有在其他窗口才能觀察到監(jiān)聽函數(shù)的執(zhí)行。可以通過這種機(jī)制，實(shí)現(xiàn)多個窗口之間的通信。
本文基于JavaScript 基礎(chǔ)。介紹了相關(guān)的屬性和方法。通過案例的分析分步進(jìn)行講解。介紹了Storage 事件在實(shí)際的應(yīng)用，在實(shí)際應(yīng)用中遇到的難點(diǎn)，提過有效的解決方案。
歡迎大家積極嘗試，有時候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學(xué)習(xí)有幫助。
本文鏈接：http://www.tebozhan.com/showinfo-26-90337-0.html一篇文章帶你了解JavaScript的Storage接口
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號