localStorage.setItem無法存儲html字符串

Question

我曾經有一個腳本，該腳本使用GM_setValue()從頁面存儲一部分html，並將其加載到另一頁面上。 所以：

var data = '<div id="test">testing</div>';
GM_setValue("test", data);
alert(GM_getValue("test", "failed"));

會提醒<div id="test">testing</div> 。

最近，我們不再使用GM API，而是使用jQuery和HTML5，而將GM_setValue GM_getValue替換為以下函數：

function $setVal(name, value){
 localStorage.setItem(name, value);
 return false;
}
function $getVal(name, notset){
 return localStorage.getItem(name) || notset;
}

現在的問題是，它不再能夠像GM Equivs一樣存儲HTML字符串。 有了新功能，示例腳本將警告失敗。

我已經嘗試過使用正則表達式轉義，並使用escape()轉義，但是我沒有運氣。

有人知道該怎么辦嗎？

編輯：尷尬的是，這實際上似乎很好。 只是不在我需要的范圍之內。 我有一個文本框，該文本框在提交以進行測試時只是作為javascript逃避了，當我從那里調用該函數時，它可以工作，但是在代碼調用時出現錯誤。 謝謝您的幫助，但實際上，這似乎不是我想的那樣的問題，對不起。

Answer 1

嘗試像這樣轉義HTML

var html = '<div id=\"test\">testing</div>';

localStorage.setItem("Foo", html);

將\\放在"之前。

編輯：

我剛剛嘗試了以下操作（在Firefox面前打開了它），它工作正常：

var html = '<div id="test">testing</div>';

localStorage.setItem("Foo", html);

console.log(localStorage.getItem("Foo"));

剛剛在Chrome中嘗試過，效果很好。

Answer 2

使用encodeURI進行存儲，然后使用decodeURI進行檢索

localStorage.setItem('html',encodeURI('<div id="test">testing</div>'))
localStorage.getItem('html')
"%3Cdiv%20id=%22test%22%3Etesting%3C/div%3E"
decodeURI(localStorage.getItem('html'))
  "<div id="test">testing</div>"

Answer 3

我將通過將通用數據轉換為JSON並返回來實現存儲 。 這適用於所有支持轉換為JSON的東西（字符串，數字，大多數對象，布爾值等） 。

var Mem = (function (localStorage, JSON) {
    return {
        'set': function (key, value) {
            return localStorage.setItem(key, JSON.stringify(value));
        },
        'get': function (key) {
            return JSON.parse(localStorage.getItem(key));
        },
        'del': function () {
            for (var i = 0; i < arguments.length; ++i)
                localStorage.removeItem(arguments[i]);
        }
    };
}(window.localStorage, window.JSON)); // protect references

和用法

Mem.set('foo', 0);
Mem.set('bar', '0');
Mem.set('baz', false);
Mem.get('foo'); // Number 0
Mem.get('bar'); // String "0"
Mem.get('baz'); // Bool false
Mem.del('foo', 'bar', 'baz'); // cleanup

所以對於你的例子

var data = '<div id="test">testing</div>';
Mem.set('test', data);
console.log(Mem.get('test') === data); // true
Mem.del('test'); // cleanup