Javascript：將任何數據導入瀏覽器頁面？

Question

URL散列是向瀏覽器頁面提供數據的唯一方式嗎？

例如，我想保存一些用戶設置而不需要服務器端，並從另一臺電腦上的用戶那裏檢索它們。

使用散列可以生成一個URL並要求用戶保存在USB閃存上的URL或快捷方式。

如果還有其他方法可以做到這一點？

Answer 1

你說： 與散列生成一個網址是可能的。因此，url必須是獨一無二的，才能向瀏覽器頁面提供數據。客戶端確實沒有其他方式。

Answer 2

由於您的網址是使資源唯一（或保存設置）的唯一方式，因此您可以使用它來存儲數據。請注意，只有散列部分不會發送到服務器。對於URL http://www.iana.org/domains/example/page?data=xyz#hash

location性質：

{ 
    "hash": "#hash", 
    "host": "www.iana.org", 
    "hostname": "www.iana.org", 
    "href": "http://www.iana.org/domains/example/page?data=xyz#hash", 
    "pathname": "/domains/example/page", 
    "port": "", 
    "protocol": "http:", 
    "search": "?data=xyz" 
} 

它不建議用這種方式傳輸敏感數據（密碼，個人信息）。即使它在服務器上不可見，它也會在瀏覽器歷史記錄中顯示。

您可以使用encodeURIComponent函數來轉義特殊字符，如#或&。

例哈希的URL像#field:data;field2:data2（其它分離器可作爲良好）：

// default settings 
var settings = { 
    "lang": "en", 
    "style": "green" 
}; 
// this should be called before the settings are used 
function loadSettings() { 
    // get the part after # and split it by `;` 
    var hashSettingsArray = location.hash.substr(1).split(";"); 
    for (var i=0; i<hashSettingsArray.length; i++) { 
     var hashSettingArray = hashSettingsArray[i].split(':'); 
     var key = decodeURIComponent(hashSettingArray[0]); 
     // if the key exists in the settings object, accept it 
     if (key in settings) { 
      // accept #field without value, defaulting to an empty string 
      var value = hashSettingsArray.length > 1 ? decodeURIComponent(hashSettingArray[1]) : ""; 
      settings[key] = value; 
     } 
    } 
} 
function getSettingsHash() { 
    var settingsArray = []; 
    for (var setting in settings) { 
     var key = encodeURIComponent(setting); 
     var value = encodeURIComponent(settings[setting]); 
     settingsArray.push(key + ":" + value); 
    } 
    // example return value: #lang:en;style:green 
    return "#" + settingsArray.join(";"); 
}