一塊兒來作chrome擴展《本地存儲localStorage》

chrome中的本地存儲其實也是用的HTML5中localStorage，惟一區別是chrome擴展有本身的localStorage，它屬於這個擴展，而不屬於一個域名。得用這一點能夠很好的處理擴展本身的一些數據，而不受訪問網站和域名的影響。

localStorage基礎

localStorage是HTML5特性，因此有些瀏覽器不必定支持，不過咱們這裏講的是chrome擴展，因此徹底不用擔憂這個問題。若是想在WEB頁面上使用，那就要檢查一下是否是支持它

能夠這樣的檢測：

if(window.localStorage){
    console.log('支持');
}else{
    console.log('不支持');
}

localStorage和memcache同樣，是key/value的存儲類型，因此，除非你只存字符串，否則就得以json的形式來存儲。以後解析成數組，就能夠很好的使用裏面的值。

增刪改查：

// 存儲/修改
localStorage.name = 'only';
localStorage['name'] = 'only';

// 刪除
localStorage['name'] = null; 刪除一個
localStorage.clear(); 刪除全部

// 查
var name = localStorage.name;
var name = localStorage['name'];

localStorage是不能跨域的，因此不一樣域名的localStorage是互不干擾的。好比在jgb.com上存儲了一個值，在www.jgb.com是訪問不了它的，反之亦然。

chrome擴展中的localStorage

擴展中的localStorage沒什麼不一樣，只是有一個注意點，content_script中的localStorage是存儲在對應域名下的，因此別的域名是不能訪問的。background_script中的localStorage是存儲在chrome擴展下的，因此無論什麼域名均可以訪問它。這一點很重要，若是沒有這個特性，擴展的應用場景就會少不少不少。

查看localStorage

查看對應域名的localStorage

右鍵選擇審查元素，如圖選擇

查看擴展的localStorage

打開擴展界面，打開你擴展的背景頁

如圖選擇

簡單示例

這個示例很簡單，擴展將匹配www.jgb.cn和www.amazon.com，打開兩個網站後，會在頁面中間顯示一個列表和一個表單，列表是之前填入的名字，表單能夠填入你名字另外的名字。列表裏，能夠刪除一條，也能夠刪除全部名字。簡單也講，就是一個增刪查。在這個例子中，能夠看到，在www.jgb.cn和www.amazon.com中都是能夠讀取和操做這些存儲內容的，不受域名的限制。

第一步：創建文件夾

目錄名就叫localstorage，目錄中的結構基本如圖：

裏面除了mainfest.json是必須的，其它東西均可以按本身的習慣來

第二步：創建mainfest.json文件

以前的日誌已經講過這個文件，因此這裏就直接帖內容

{
    "manifest_version": 2,
    "name": "一塊兒來作chrome擴展之本地存儲",
    "version": "0.1",
    "description": "一個簡單的本地存儲例子",
    "background": {
        "scripts": [
            "include/jquery-1.11.0.min.js",    
            "scripts/background.js"
        ]
    },
    "content_scripts": [{
        "matches": [
            "http://*.jgb.cn/*",
            "http://*.amazon.com/*"
        ],
        "css": ["css/common.css"],
        "js": [
            "include/jquery-1.11.0.min.js",
            "scripts/main.js"
        ]
    }]
}

若是對這個文件不熟悉，能夠看看一塊兒來作chrome擴展《基礎介紹》

把jquery拷貝到include中，再到scripts目錄創建main.js和background.js

第三步：建立界面

這裏咱們建立一個簡單的界面，在目標網站的正中間，顯示一個500*300的浮動層，正常js，寫法隨意

var main = {
    
    /**
     * 建立界面
     */
    createHtml: function(){
        var _html = '<div id="ls_box">'+
            '<h3>'+
                '本地存儲 local storage'+
            '</h3>'+
            '<div id="ls_list">'+
                '正在加載數據...'+
            '</div>'+
            '<div id="ls_form">'+
                '<label>'+
                    '新增: '+
                '</label>'+
                '<input type="text" id="ls_message" />'+
                '<button id="ls_save">保存</button>'+
            '</div>'+
        '</div>';
        $('body').append(_html);
    }
}

界面大體以下

第四步：向background發送消息

方法很簡單

/**
 * 向background發送消息
 * @params strAction string 執行方法
 * @params dicData dict 數據字典
 * @params callback function 回調函數
 */
sendMessageBack: function(strAction, dicData, callback){
    chrome.extension.sendMessage({'action': strAction, 'data': dicData}, callback);
},

第五步：將存儲內容輸出到頁面

/**
 * 將已有數據寫到頁面上
 */
showList: function(dicList){
    if(!dicList || dicList.length == 0){
        $("#ls_list").html('<p>沒有找到數據</p>');
        return;
    }

    // 遍歷對象，構建輸出html
    var _html = ['<ul>'];
    for(var i in dicList){
        _html.push('<li><span class="ls_del" data-item="'+dicList[i]+'">X</span>'+dicList[i]+'</li>');
    }
    _html.push('</ul>');
    $("#ls_list").html(_html.join(''));

    // 監聽刪除
    _this.listenDel();
},

第六步：監聽保存

一個簡單的單擊事件，把文本內容發送給background.js，而後將返回的數據利用上面的方法輸出到頁面上

/**
 * 監聽保存事件
 */
listenSave: function(){
    _this = this;

    $("#ls_save").click(function(){
        // 獲取message
        var strMessage = $.trim($('#ls_message').val());
        if(!strMessage){
            return false;
        }
        // 通知background，保存數據
        _this.sendMessageBack('save', {'message': strMessage}, function(response){
            if(response.status == 200){
                // 將內容輸出到頁面
                _this.showList(response.data);
                $('#ls_message').val('');
            }
        });
    });
},

第七步：監聽刪除

刪除和保存同理，只是發送到background的請求方法不一樣，正常JS操做，這裏就不帖代碼，最後看看background.js的監聽與返回消息

第八步：background監聽消息與返回

/**
 * 監聽content_script發送的消息
 */
chrome.extension.onMessage.addListener(function(request, _, sendResponse){
    // 返回數據
    var dicReturn;

    // 讀取已存數據
    if(request.action == 'list'){
        // 從localstorage中讀取數據
        var strList = localStorage['list'];
        if(strList){
            // 將json字符串轉爲對象
            var dicList = JSON.parse(strList)
            dicReturn = {'status': 200, 'data': dicList}
        }else{
            dicReturn = {'status': 404}
        }

        // 向content_script返回信息
        sendResponse(dicReturn);
    }

    // 保存
    if(request.action == 'save'){
        // content_script傳來message
        var strMessage = request.data.message;
        // 從localstorage中讀取數據
        var strList = localStorage['list'];
        var dicList = [];
        if(strList){
            // 將json字符串轉爲對象
            dicList = JSON.parse(strList)
        }
        dicList.push(strMessage);
        localStorage['list'] = JSON.stringify(dicList);

        dicReturn = {'status': 200, 'data': dicList};
        // 向content_script返回信息
        sendResponse(dicReturn);
    }

    // 刪除
    if(request.action == 'del'){
        // content_script傳來的message
        var strMessage = request.data.message;
        // 從localstorage中讀取數據
        var strList = localStorage['list'];
        if(strList){
            // 將json字符串轉爲對象
            dicList = JSON.parse(strList);
            // 遍歷數據，找到對應值
            for(var i in dicList){
                if(dicList[i] == strMessage){
                    // 刪除該值
                    dicList.splice(i, 1);
                }
            }

            // 從新存儲
            localStorage['list'] = JSON.stringify(dicList);
            // 向content_script返回信息
            sendResponse({'status': 200});
        }else{
            sendResponse({'status': 501, 'msg': '刪除失敗，未有數據'});
        }
    }
})

接收content_script發來的數據，使用request.data.message，data.message都是本身定義的key，因此想傳什麼，均可以本身定

返回值使用sendResponse()方法，內容爲一個對象，content_script接受到後，能夠直接使用，因此就有了if(response.status == 200){}這樣的寫法。

一個簡單的本地存儲就是這樣了，加載到chrome或是同一內核的瀏覽器中，打開www.jgb.cn或是www.amazon.com，就能夠看到擴展界面，保存一些數據，在兩個網站刷新，會發現，數據都是能夠獲取的。

源代碼

本示例代碼：https://github.com/onlyfu/localstorage