localStorage和sessionStorage

RancherLabs 發(fā)布于2019-08-20 16:06 / 2004人閱讀

摘要：為本地存儲(chǔ)，是一種永久性存儲(chǔ)，除非手動(dòng)清除。是會(huì)話存儲(chǔ)，當(dāng)瀏覽器關(guān)閉后，存儲(chǔ)數(shù)據(jù)會(huì)自動(dòng)清除。無需轉(zhuǎn)換數(shù)據(jù)類型獲取存儲(chǔ)的數(shù)據(jù)，無需指定鍵值。移除數(shù)據(jù)清空所有的存儲(chǔ)清空所有的存儲(chǔ)

localStoage為本地存儲(chǔ)，是一種永久性存儲(chǔ)，除非手動(dòng)清除。sessionStorage是會(huì)話存儲(chǔ)，當(dāng)瀏覽器關(guān)閉后，存儲(chǔ)數(shù)據(jù)會(huì)自動(dòng)清除。兩種存儲(chǔ)方式幾乎都有相同的方法和屬性；

1.localStorage.length 和 sessionStorage.length : 返回本地存儲(chǔ)列表長(zhǎng)度;需要說明的是可以通過localStorage對(duì)象獲取對(duì)應(yīng)的存儲(chǔ)數(shù)據(jù)，比如已經(jīng)存儲(chǔ)了一個(gè)鍵為name的數(shù)據(jù)，使用localStorage.name獲取存儲(chǔ)數(shù)據(jù)；下面的方法都是基于localStorage 對(duì)象或 sessionStorage 對(duì)象；

2.getItem( keyName )方法：通過鍵獲取存儲(chǔ)的數(shù)據(jù)；

3.setItem( keyName,value )方法：存儲(chǔ)數(shù)據(jù)，keyName為存儲(chǔ)數(shù)據(jù)的鍵，value實(shí)際要存儲(chǔ)的數(shù)據(jù)（可以把keyName理解成給要存儲(chǔ)的數(shù)據(jù)起的名字，便于管理）；

4.removeItem( keyName )方法：將指定鍵名的數(shù)據(jù)刪除；

5.clear() 方法：清空所有的存儲(chǔ)數(shù)據(jù)；

6.key() 方法：獲取鍵值，需要注意的是并不能返回指定布爾值需要作進(jìn)一步處理，下面是針對(duì)兩種不同的存儲(chǔ)方式使用統(tǒng)一的函數(shù)方式實(shí)現(xiàn)，歡迎各位提出意見。

7.es6 版本發(fā)布在github 也可以使用 npm i -S feitools

https://github.com/lizhanyi/t...

    /*  功能：拋出異常 , 調(diào)試使用
        @param msg , 異常信息
    */
    throwError : function( msg ){ // 調(diào)試使用
        throw new Error( msg );
    }


    /*  功能：設(shè)置和獲取數(shù)據(jù)
        @param key，存儲(chǔ)的鍵
        @param value，待存儲(chǔ)的數(shù)據(jù)
        @param boolean，區(qū)分對(duì)象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] );

        }

    }



    /*  功能：刪除存儲(chǔ)數(shù)據(jù)
        @param key，待刪除的數(shù)據(jù)的鍵
        @param boolean，區(qū)分對(duì)象sessionStorage和localStorage
    */
    removeItem : function( key, boolean){ // 刪除指定 key 的存儲(chǔ)數(shù)據(jù)
        var storage;
        boolean ? 
            storage = window.sessionStorage : storage = window.localStorage;
        return storage.removeItem( key );
    }


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


    /*  功能：判斷是否有某一鍵名的數(shù)據(jù)，若存儲(chǔ)數(shù)據(jù)存在返回true,否則返回false
        @param key，指定的鍵名
        @param boolean，區(qū)分對(duì)象sessionStorage和localStorage
        用這種方式判斷是否存儲(chǔ)了某個(gè)數(shù)據(jù)，應(yīng)該會(huì)好于使用getItem()方法；
    */
    getKey : function( keyName/*boolean*/){ // 獲取數(shù)據(jù)存儲(chǔ)的鍵
        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;
    }

上面的封裝在使用的時(shí)候有點(diǎn)糾結(jié)，使用多次和時(shí)間長(zhǎng)的時(shí)候自己也不知道是使用了seeeion還是使用了local，所謂實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)

優(yōu)化一下代碼，使用構(gòu)造函數(shù)方式實(shí)現(xiàn)

/*
    @param way，存儲(chǔ)方式，指定是session或local存儲(chǔ)
*/
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");// 創(chuàng)建一個(gè)本地存儲(chǔ)的實(shí)例
    local.setItem("key","data");// 存儲(chǔ)數(shù)據(jù)
    local.getItem("key"); // 獲取本地存儲(chǔ)數(shù)據(jù)
    local.removeItem("key"); // 刪除鍵名為key的存儲(chǔ)數(shù)據(jù)
    local.getKey("key"); // 判斷是否存在某一鍵的數(shù)據(jù)
    local.clear();// 清空本地存儲(chǔ)(刪除所有的本地存儲(chǔ)的數(shù)據(jù))
    
var session = new Storage("session");// 創(chuàng)建一個(gè)session存儲(chǔ)的實(shí)例
    session.setItem("key","data");// 存儲(chǔ)數(shù)據(jù)
    session.getItem("key"); // 獲取session存儲(chǔ)數(shù)據(jù)
    session.removeItem("key"); // 刪除鍵名為key的存儲(chǔ)數(shù)據(jù)
    session.getKey("key"); // 判斷是否存在某一鍵的數(shù)據(jù)
    session.clear();// 清空會(huì)話存儲(chǔ)(刪除所有的session存儲(chǔ)的數(shù)據(jù))

繼續(xù)優(yōu)化：(使用原型對(duì)象，共享屬性和方法)

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");// 創(chuàng)建一個(gè)本地存儲(chǔ)的實(shí)例
    local.setItem("key","data");// 存儲(chǔ)數(shù)據(jù)
    local.getItem("key"); // 獲取本地存儲(chǔ)數(shù)據(jù)
    local.removeItem("key"); // 刪除鍵名為key的存儲(chǔ)數(shù)據(jù)
    local.getKey("key"); // 判斷是否存在某一鍵的數(shù)據(jù)
    local.clear();// 清空本地存儲(chǔ)(刪除所有的本地存儲(chǔ)的數(shù)據(jù))

再次優(yōu)化代碼：(針對(duì)上面的寫法再來一次簡(jiǎn)化)

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;

這樣看起來舒服多了，全部共享出去了，所有的實(shí)例都可以使用了，哈哈哈，親測(cè)可用，如遇到問題可以隨時(shí)交流，發(fā)現(xiàn)bug，也要及時(shí)反饋哈

關(guān)于prototype的幾點(diǎn)說明

只要函數(shù)被聲明了，就會(huì)產(chǎn)生對(duì)應(yīng)的原型對(duì)象，即所有的函數(shù)都有原型對(duì)象，可以通過functionName.prototype訪問原型對(duì)象。既然functionName.prototype是對(duì)象那么就可以通過"."的方式設(shè)置屬性和方法如：

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

自定義方法優(yōu)化

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"); // 實(shí)例化一個(gè)對(duì)象，指定鍵值和存儲(chǔ)方式
myStore.setItem("value"); // 指定存儲(chǔ)的數(shù)據(jù)，可以是字符串、數(shù)字、json對(duì)象、數(shù)組。無需轉(zhuǎn)換數(shù)據(jù)類型
myStore.getItem(); // 獲取存儲(chǔ)的數(shù)據(jù)，無需指定鍵值。

myStore.removeItem(); // 移除數(shù)據(jù)

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

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

云服務(wù)器 GPU云服務(wù)器 Sessionstorage localstorage localstorage存儲(chǔ) 存儲(chǔ)localstorage

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82711.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

RancherLabs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于STM32的匯編程序

閱讀 2022·2021-09-30 09:46
CSS3動(dòng)畫之逐幀動(dòng)畫

閱讀 1427·2019-08-30 15:43
css3

閱讀 1200·2019-08-29 13:28
Web 標(biāo)準(zhǔn)制定流程

閱讀 1984·2019-08-29 11:24
原生js造輪子之模仿JQ的slideDown()與slideUp()

閱讀 1775·2019-08-26 13:22
仿鏈家地圖找房的簡(jiǎn)單實(shí)現(xiàn)

閱讀 4095·2019-08-26 12:01
AJAX的出現(xiàn)與跨域處理

閱讀 1881·2019-08-26 11:33
JS每日一題: 小程序頁面之間如何通信?

閱讀 3293·2019-08-23 15:34

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

localStorage和sessionStorage

相關(guān)文章

***sessionStorage和localStorage***

**印象最深的一個(gè)bug：sessionStorage緩存在移動(dòng)端失效**

**sessionStorge和localStorage的使用-踩坑記_09**

**sessionStorge和localStorage的使用-踩坑記_09**

客戶端數(shù)據(jù)存儲(chǔ) --- web storage From 《高程3》

發(fā)表評(píng)論

0條評(píng)論

RancherLabs

男|高級(jí)講師

TA的文章

基于STM32的匯編程序

CSS3動(dòng)畫之逐幀動(dòng)畫

css3

Web 標(biāo)準(zhǔn)制定流程

原生js造輪子之模仿JQ的slideDown()與slideUp()

仿鏈家地圖找房的簡(jiǎn)單實(shí)現(xiàn)

AJAX的出現(xiàn)與跨域處理

JS每日一題: 小程序頁面之間如何通信?

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

localStorage和sessionStorage

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！