Local Storage 操做小插件 iStorage 介紹

iStorage

Local Storage 是 HTML 5 新增的一個本地存儲 API,所謂 Local Storage 就是一個小倉庫的意思,它有 5 M 的大小空間,存儲在瀏覽器中,咱們能夠經過 JavaScript 來操縱 Local Storage。

iStorage 介紹

iStorage是針對瀏覽器 Local Storage 的一個便捷操做插件。它支持用戶直接存儲獲取數字(非 NaN)、字符串、數組、JSON 類型數據。html

iStorage 是基於原生 JavaScript 實現的,它編譯壓縮後僅 2kb 左右,請放心試用。也是做者的第一個 NPM 插件,不足之處還請見諒和指正。webpack

iStorage 安裝

iStorage 支持 CommonJS RequireJS <script> 方式引入。web

// 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 尾參數可選,用於在控制檯打印操做詳情日誌。npm

// 獲取 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.1cookie

0.0.2

該版本在代碼上進行了完善,並提供了更好 debug log 信息。session

詳見 redeme@0.0.2異步

0.0.3

此版本改動較大,涉及方法名稱的語義化,新方法的添加,check 方法廢棄,新增本地 Webpack 調試代碼,debug log 信息進一步優化。webpack-dev-server

相關文章
相關標籤/搜索