Local Storage 操縱小插件 iStorage 引見

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 <script> 體式格局引入。

// NPM 裝置
npm i istorage

// ES6
import iStorage from "istorage";

// require
var iStorage = require('istorage');

// html
<script src="http://peichenhu.cn/doc/lib/iStorage.min.js"></script>

iStorage 運用

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.js

iStorage 將來

運用 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 信息進一步優化。

    原文作者:philip
    原文地址: https://segmentfault.com/a/1190000014395479
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞