网站首页 » 前端开发 » HTML5 » 本地存储 LocalStorage 封装
上一篇:
下一篇:

本地存储 LocalStorage 封装

看完题目相信你应该知道这篇文章将会是什么样的内容了,对没错,直接贴出代码。下面就是把本地存储 LocalStorage 封装了下,在实践开发中不用第次都要重写一遍或者拷贝一份,要用本地存储时就直接引入 这个 localstorage.js 就可以了。这个文件代码真的不多:

看这里
/*
* @Author: 朝夕熊
* @Date:   2017-10-10 21:44:14
* @Last Modified by:   朝夕熊
* @Last Modified time: 2017-10-10 22:32:42
*/

function LocalStorage () {};
LocalStorage.prototype.storage = window.localStorage;
LocalStorage.prototype.setItem =  function(key,value){
    if(this.getType(object) === "object" || this.getType(object) === "Array"){ // 如果是对象
        value = JSON.stringify(value);
    }
    storage.setItem(key,value);
}

LocalStorage.prototype.getItem =  function(key){
    var value = storage.getItem(key);
    if(value === null){ // 如果不存在
      return false;
    }
    if(value && value.substring(0,1) === "{" || value.substring(0,1) === "["){ // 如果字符串符合对象或者数组基本特征
      value = JSON.parse(value); // 把字符串转为对象
    }
    return value;
}

LocalStorage.prototype.removeItem = function(key){
    this.getItem(key) && storage.removeItem(key);
}

LocalStorage.prototype.clear = function(){
    storage.clear(); // 清空本地存储
}

// 判断变量类型
LocalStorage.getType = function(object){
    /**
    * 方法来源:prototype.js
    * getType(5); // => "Number"
    * getType({}); // => "Object"
    * getType(/foo/); // => "RegExp"
    * getType(''); // => "String"
    * getType(true); // => "Boolean"
    * getType([]); // => "Array"
    * getType(undefined); // => "Window"
    * getType(Element); // => "Constructor"
    **/
    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}

上面的 localstorage.js 用到了面向对象编程的思想如果有不了解的地方可以看这里《JavaScript 面向对象编程详解》。这样把这个本地存储封装起来就更方便了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/localstorage-encapsulation/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END