摘要:介紹是針對瀏覽器的一個便捷操作插件。也是作者的第一個插件,不足之處還請見諒和指正。安裝使用支持操作。詳見此版本改動較大,涉及方法名稱的語義化,新方法的添加,方法廢棄,新增本地調試代碼,信息進一步優化。
iStorage
Local Storage 是 HTML 5 新增的一個本地存儲 API,所謂 Local Storage 就是一個小倉庫的意思,它有 5 M 的大小空間,存儲在瀏覽器中,我們可以通過 JavaScript 來操縱 Local Storage。iStorage 介紹
iStorage是針對瀏覽器 Local Storage 的一個便捷操作插件。它支持用戶直接存儲和獲取數字(非 NaN)、字符串、數組、JSON 類型數據。
iStorage 是基于原生 JavaScript 實現的,它編譯壓縮后僅 2kb 左右,請放心試用。也是作者的第一個 NPM 插件,不足之處還請見諒和指正。
iStorage 安裝iStorage 支持 CommonJS RequireJS 方式引入。
// NPM 安裝 npm i istorage // ES6 import iStorage from "istorage"; // require var iStorage = require("istorage"); // htmliStorage 使用
iStorage 支持 getLength getIndex getItem setItem removeItem clearAll 操作。debug 尾參數可選,用于在控制臺打印操作詳情日志。
// 獲取 Local Storage Length iStorage.getLength(debug: Boolean); // 根據 Local Storage 的長度(length)作為索引值,來獲取鍵名 iStorage.getIndex(index:Number, debug: Boolean); // 依據鍵名獲取值 iStorage.getItem(key: String, debug: Boolean); // 添加鍵值對,值類型允許長度為0 iStorage.setItem(key:String, value:!NaN || Number || String || Array || JSON, debug:Boolean) // 刪除鍵值對 iStorage.removeItem(key: String, debug: Boolean); // 清楚該域的所有Local Storage 記錄 iStorage.clearAll(key: String, debug: Boolean);iStorage 本地測試
// 請先fork,下載到本地后命令行初始化開發調試環境: > npm i // 安裝 uglify-js 用于壓縮生產 > npm test // webpack-dev-server open: http://localhost:9000/ // 若要修改插件,比如 0.0.3 版,請參考以下指令 // 修改未壓縮版本 iStorage.js, 修改完后,使用 uglify-js 壓縮 > uglifyjs iStorage.js -m -c -o iStorage.min.jsiStorage 未來
使用 TypeScript 重構,添加 sessionStorage 和 cookie,并希望支持異步操作.
iStorage 更新日志 0.0.1第一版代碼比較粗糙,僅用于驗證代碼結構和方法的設計、插件的實際用途。基本實現了數字、字符串、數組、JSON 對象四種基本數據的類型檢測,直接存儲和獲取;方法上實現了:
check: 檢查某個鍵名是否存在
get:獲取某個鍵名的值
set:設置鍵值對
remove:根據鍵名刪除某個鍵值對
詳見 redeme@0.0.1
0.0.2該版本在代碼上進行了完善,并提供了更好 debug log 信息。
詳見 redeme@0.0.2
0.0.3此版本改動較大,涉及方法名稱的語義化,新方法的添加,check 方法廢棄,新增本地 Webpack 調試代碼,debug log 信息進一步優化。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94252.html
摘要:定時器時間到了就將中存的信息以及存的時間信息就是那個對象中的刪掉就行了。難道存了三條我就做三個定時器存的條我就做個定時器這也太了而且也并不符合實際。 一、酷酷的開頭 在潛水的時間長達一年之后,我終于鼓起勇氣開始寫我的第一篇文章了。前端小菜,只是想記錄一下自己的想法,望各位看到這文的大佬輕噴。 在現在前后端分離的開發模式下,存儲信息一般都不在使用以往使用的cookie了,就拿筆主我之前做...
摘要:擴展應用模塊功能介紹擴展應用由很多部分組成,其中主要模塊為為了避免由于翻譯原因導致的問題,因此在下文中對相關模塊的稱呼一律采用上面的英文。附錄官方開發文檔英建議有英文閱讀能力的人閱讀此文檔。 概述 本文通過對chrome插件的各個部分進行快速的介紹,從而讓大家了解插件各個部分的關系,并且知道如何將其進行組裝成一個完整的chrome插件。 由于chrome官方文檔中對于如何從零開發一個c...
摘要:老板查崗時,一個快捷鍵,立即關閉所有賴皮頁面。上傳,發布插件。從零開始,開發簡單的一鍵賴皮插件的上班族都在使用瀏覽器賴皮,所以我們選擇采用插件來實現功能。 很多人介紹過Chrome插件,但必須要說,插件開發就是擺弄一個小玩具,第一要素是實用,其次是好玩。 單純羅列各種功能是非常無趣的。 所以把一篇舊文拿出來與大家分享。 人,活著就是為了賴皮。 作為一個合格的開發人員,把30%的時間用...
摘要:小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件,以及一些注意事項,并且提到了如何授權和使用谷歌插件,重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。 我們在上網的時候,都會用到瀏覽器,但是瀏覽器并非擁有我們想要的所有功能,我們可以根據自己的需要,實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告,如果你希望擁有一個純凈的網頁,可以實現一個插件來刪除網...
摘要:小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件,以及一些注意事項,并且提到了如何授權和使用谷歌插件,重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。 我們在上網的時候,都會用到瀏覽器,但是瀏覽器并非擁有我們想要的所有功能,我們可以根據自己的需要,實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告,如果你希望擁有一個純凈的網頁,可以實現一個插件來刪除網...
閱讀 716·2021-11-16 11:44
閱讀 3548·2019-08-26 12:13
閱讀 3243·2019-08-26 10:46
閱讀 2357·2019-08-23 12:37
閱讀 1189·2019-08-22 18:30
閱讀 2532·2019-08-22 17:30
閱讀 1841·2019-08-22 17:26
閱讀 2293·2019-08-22 16:20