资讯专栏INFORMATION COLUMN

localStorage和sessionStorage

RancherLabs / 1892人阅读

摘要:为本地存储,是一种永久性存储,除非手动清除。是会话存储,当浏览器关闭后,存储数据会自动清除。无需转换数据类型获取存储的数据,无需指定键值。移除数据清空所有的存储清空所有的存储

localStoage为本地存储,是一种永久性存储,除非手动清除。sessionStorage是会话存储,当浏览器关闭后,存储数据会自动清除。两种存储方式几乎都有相同的方法和属性;

1.localStorage.length 和 sessionStorage.length : 返回本地存储列表长度;需要说明的是可以通过localStorage对象获取对应的存储数据,比如已经存储了一个键为name的数据,使用localStorage.name获取存储数据;下面的方法都是基于localStorage 对象 或 sessionStorage 对象;

2.getItem( keyName )方法:通过键获取存储的数据;

3.setItem( keyName,value )方法:存储数据,keyName为存储数据的键,value实际要存储的数据(可以把keyName理解成 给要存储的数据起的名字,便于管理);

4.removeItem( keyName )方法: 将指定键名的数据删除;

5.clear() 方法:清空所有的存储数据;

6.key() 方法: 获取键值,需要注意的是并不能返回指定布尔值需要作进一步处理,下面是针对两种不同的存储方式使用统一的函数方式实现,欢迎各位提出意见。

7.es6 版本 发布在github 也可以使用 npm i -S feitools

https://github.com/lizhanyi/t...
    /*  功能:抛出异常 , 调试使用
        @param msg , 异常信息
    */
    throwError : function( msg ){ // 调试使用
        throw new Error( msg );
    }


    /*  功能:设置和获取数据
        @param key,存储的键
        @param value,待存储的数据
        @param boolean,区分对象sessionStorage和localStorage
    */
    setItem : function( key, value/*, boolean*/ ){
        var 
        args = arguments,
        len = args.length,
        storage;
        len == 0 && this.throwError("Not enough arguments to Storage.getItem.");
        if( args[len-1] == true ){// 是session
            storage = window.sessionStorage;
            len == 1 && this.throwError("Not enough arguments to Storage.getItem.");
            len >= 3 && storage.setItem( args[0], args[1] );
            if( len == 2 ) return storage.getItem( args[0] );
        }else{// 是local
            storage = window.localStorage;
            len >= 2 && storage.setItem( args[0], args[1] );
            if( len == 1 ) return storage.getItem( args[0] );

        }

    }



    /*  功能:删除存储数据
        @param key,待删除的数据的键
        @param boolean,区分对象sessionStorage和localStorage
    */
    removeItem : function( key, boolean){ // 删除指定 key 的存储数据
        var storage;
        boolean ? 
            storage = window.sessionStorage : storage = window.localStorage;
        return storage.removeItem( key );
    }


    clearItem : function(/*boolean*/){// 清空所有存储
        arguments[0] ?  window.sessionStorage.clear() : window.localStorage.clear();
    }


    /*  功能:判断是否有某一键名的数据,若存储数据存在返回true,否则返回false
        @param key,指定的键名
        @param boolean,区分对象sessionStorage和localStorage
        用这种方式判断是否存储了某个数据,应该会好于使用getItem()方法;
    */
    getKey : function( keyName/*boolean*/){ // 获取数据存储的键
        var 
        temp,
        args = arguments;
        len = args.length;
        args[len-1] == true ?  temp = window.sessionStorage : temp = window.localStorage;
        for(var i = 0; i < temp.length; i++)
            if( keyName == temp.key(i) ) 
                return true;
        return false;
    }

上面的封装在使用的时候有点纠结,使用多次和时间长的时候自己也不知道是使用了seeeion还是使用了local,所谓实践是检验真理的唯一标准

优化一下代码,使用构造函数方式实现
/*
    @param way,存储方式,指定是session或local存储
*/
function Storage( way ){
    this.map = {
        "session" : window.sessionStorage,
        "local" : window.localStorage
    },
    this.getItem = function( key ){
        return this.map[way].getItem( key );
    },
    this.setItem = function( key, value ){
        this.map[way].setItem( key,value )
    },
    this.removeItem = function( key ){
        this.map[way].removeItem( key );
    },
    this.clear = function(){
        this.map[way].clear();
    },
    this.getKey = function( key ){
        //var len = map.way.length;
        return key in map[way];
    }
};

var local = new Storage("local");// 创建一个本地存储的实例
    local.setItem("key","data");// 存储数据
    local.getItem("key"); // 获取本地存储数据
    local.removeItem("key"); // 删除键名为key的存储数据
    local.getKey("key"); // 判断是否存在某一键的数据
    local.clear();// 清空本地存储(删除所有的本地存储的数据)
    
var session = new Storage("session");// 创建一个session存储的实例
    session.setItem("key","data");// 存储数据
    session.getItem("key"); // 获取session存储数据
    session.removeItem("key"); // 删除键名为key的存储数据
    session.getKey("key"); // 判断是否存在某一键的数据
    session.clear();// 清空会话存储(删除所有的session存储的数据)
继续优化:(使用原型对象,共享属性和方法)
function Storage( way ){
    this.way = way;
};
Storage.prototype.map = {
    "session" : window.sessionStorage,
    "local" : window.localStorage
};
Storage.prototype.setItem = function( key, value){
    this.map[this.way].setItem( key, value )
};
Storage.prototype.getItem = function( key ){
    return this.map[this.way].getItem( key );
};
Storage.prototype.removeItem = function( key ){
    this.map[this.way].removeItem( key )
};
Storage.prototype.clear = function(){
    this.map[this.way].clear();
};
Storage.prototype.getKey = function( key ){
    return key in this.map[this.way];
};

var local = new Storage("local");// 创建一个本地存储的实例
    local.setItem("key","data");// 存储数据
    local.getItem("key"); // 获取本地存储数据
    local.removeItem("key"); // 删除键名为key的存储数据
    local.getKey("key"); // 判断是否存在某一键的数据
    local.clear();// 清空本地存储(删除所有的本地存储的数据)
    
再次优化代码:(针对上面的写法再来一次简化)
function Storage( way ){
    this.way = way;
};
Storage.prototype = {
    map : {
        "session" : window.sessionStorage,
        "local" : window.localStorage
    },
    setItem : function( key, value ){
        this.map[this.way].setItem( key, value )
    },
    getItem : function( key ){
        return this.map[this.way].getItem( key );
    },
    removeItem : function( key ){
        this.map[this.way].removeItem( key );
    },
    clear : function(){
        this.map[this.way].clear();
    },
    getKey : function( key ){
        return key in this.map[this.way];
    }
};
Storage.prototype.constructor = Storage;

这样看起来舒服多了,全部共享出去了,所有的实例都可以使用了,哈哈哈,亲测可用,如遇到问题可以随时交流,发现bug,也要及时反馈哈

关于prototype的几点说明

只要函数被声明了,就会产生对应的原型对象,即所有的函数都有原型对象,可以通过functionName.prototype访问原型对象。既然functionName.prototype是对象那么就可以通过"."的方式设置属性和方法如:

function People(){};
People.prototype.name = "阿里巴巴";
People.prototype.get = function(){
    console.log(this.name);
};
var people = new People(); // 实例化
console.log( people.name ); // 阿里巴巴
console.log( people.get() );// 阿里巴巴
console.log( people.constructor ); // People函数
console.log( people.__proto__.constructor ); // People函数

自定义方法优化
function Memory( key, way ){
    this.way = way;
    this.key = key;
};
Memory.prototype = {
    constructor : Memory,
    map : {
        "session" : window.sessionStorage,
        "local" : window.localStorage
    },
    setItem : function( value ){
        this.map[this.way].setItem( this.key, JSON.stringify( value ) )
    },
    getItem : function(){
        return JSON.parse( this.map[this.way].getItem( this.key ) );
    },
    removeItem : function(){
        this.map[this.way].removeItem( this.key );
    },
    clear : function(){
        this.map[this.way].clear();
    },
    getKey : function(){
        return this.key in this.map[this.way];
    }
};
var myStore = new Memory("key","session"); // 实例化一个对象,指定键值和存储方式
myStore.setItem("value"); // 指定存储的数据,可以是字符串、数字、json对象、数组。无需转换数据类型
myStore.getItem(); // 获取存储的数据,无需指定键值。

myStore.removeItem(); // 移除数据

var session = new Memory("clear","session");
session.clear(); // 清空所有的 session 存储

var local = new Memory("clear","local");
local.clear(); // 清空所有的 local 存储





文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82711.html

相关文章

  • sessionStoragelocalStorage

    摘要:前端存储和简述曾在项目中多次使用过和来存放,但一直未深入了解。以为例他们均只能存储字符串类型的对象存储大小都为都遵守同源策略不同点有期限,当窗口或浏览器关闭时就会被销毁。本文如有错误,欢迎指出。 H5前端存储 localStorage 和 sessionStorage 简述 曾在项目中多次使用过localStorage和sessionStorage来存放token,但一直未深入了解。近...

    wujl596 评论0 收藏0
  • 印象最深的一个bug:sessionStorage缓存在移动端失效

    摘要:移动端缓存失效是我印象最深的一个之一,为啥呢,因为这个问题导致我加班到很晚。的生命周期是仅在当前会话下有效。引入了一个浏览器窗口的概念,是在同源的窗口中始终存在的数据。无bug,不程序:作为程序员的我,不是修bug就是在写bug的路上。  移动端sessionStorage缓存失效是我印象最深的一个bug之一,为啥呢,因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。在我刚工作...

    yuxue 评论0 收藏0
  • sessionStorgelocalStorage的使用-踩坑记_09

    摘要:的使用属性允许你访问一个对象。它与相似,不同之处在于里面存储的数据没有过期时间设置,而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。 sessionStorge的使用 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 lo...

    Jochen 评论0 收藏0
  • sessionStorgelocalStorage的使用-踩坑记_09

    摘要:的使用属性允许你访问一个对象。它与相似,不同之处在于里面存储的数据没有过期时间设置,而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。 sessionStorge的使用 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 lo...

    PrototypeZ 评论0 收藏0
  • 客户端数据存储 --- web storage From 《高程3》

    摘要:的目的就是取代进行大量的本地数据存储,其中不能进行跨会话存储,这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说,对存储空间大小的限制都是以每个源协议域和端口为单位的。 前言 本文首先介绍web storage和Cookie的对比,解释web storage的优势;随后指出怎样使用插firebug插件的扩展firestorag...

    wangbinke 评论0 收藏0

发表评论

0条评论

RancherLabs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<