頁面之間的HTML5本地存儲

所以我是新來的HTML5/JS編程場景，但我真的很想學習很快......我期待建立一個功能類似於Jeopardy遊戲的網站，主屏幕有一個包含類別和點值的表格，點擊後將超鏈接到問題頁面。在主頁上，我正在追蹤這些要點。我有一個文本框有編碼爲：頁面之間的HTML5本地存儲

<input type="number" id="SamTotalPoint" value="0" readonly="readonly"/>

在問題頁面，我把按鈕，在理想情況下添加點使用本地存儲的主頁。該按鈕編碼爲：

現在我正在尋找連接兩個。在外部的JS上，我試圖將這個函數定義爲：

function SamScoreKeeper(samPoint,pointsToAdd) 
{ 
    window.localStorage.setItem("SamTotalPoint", "0"); 
    var SamOldScore = parseInt(window.localStorage.getItem("SamTotalPoint")); 
    window.alert(samPoint); 
    window.alert(pointsToAdd); 
    samPoint = samPoint + pointsToAdd 
    var SamNewScore = samPoint; 
    var SamTotalv = SamOldScore + SamNewScore 
    window.alert(samPoint); 
    window.history.back(); 
    document.getElementById("SamTotalPoint").value; = SamTotalv; 
}

我把那根本不起作用。我花了一段時間試圖研究這一點，並更多地理解它，但經過大約6-7小時的時間與它一起戰鬥並觀看一堆教程，我仍然無法得到它。這個頁面只能在閃存盤上本地運行，而不是實際託管在服務器上，這就是爲什麼我希望本地存儲可以解決問題而不是使用PHP。窗口警報就在那裏，所以我可以確保JS正在做算術。任何人都可以幫助我嗎？這將是最感謝！

來源

2015-04-21 Patrick Northcraft

'document.getElementById（「SamTotalPoint」）。value; = SamTotalv;這是一個明顯的錯字。另外，結果是什麼，你期待什麼？ –

你實際上並沒有更新localStorage中的任何東西，所以它不會被設置爲除「0」之外的任何東西。另外，不要指望在調用'history.back（）'後有意義的事情發生。「SamTotalPoint」位於不同的頁面上，無法通過評分頁面訪問。使用[Leo's answer]（http://stackoverflow.com/a/29778195/361762） – dave

@ E_net4中建議的事件 - 想法是讓主頁上的文本框增加一個特定的值... in在這個例子的情況下，它應該是50.我必須沒有意識到，但我沒有看到你指出的錯字。 –

當localStorage的被修改，一個storage活動將在共享存儲所有其他頁面解僱。你只需要處理事件，並檢索更新的數據。這也適用於sessionStorage。

document.addEventListener('storage', function(e) { 
    // don't forget to take a look at the parameter - event object 
    // update your page here, good luck 
}, false);

來源

2015-04-21 16:36:03 Leo

謝謝！現在我的代碼看起來像 'document.addEventListener（'SamScoreStorage'，函數SamScoreKeeper（samPoint，pointsToAdd） {window.localStorage.setItem（「SamTotalPoint」，「0」）; var SamOldScore = parseInt（window.localStorage.getItem （「SamTotalPoint」））; window.alert（samPoint）; window.alert（pointsToAdd）; samPoint = samPoint + pointsToAdd 變種SamNewScore = samPoint; 變種SamTotalv = SamOldScore + SamNewScore window.alert（samPoint）; window.history.back（）; document.getElementById（「SamTotalPoint」）。value = SamTotalv; }，false）;' Uncaught ReferenceError：SamScoreKeeper is not defined'。這是爲什麼？ –

@PatrickNorthcraft下面是[MDN文檔]（https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Responding_to_storage_changes_with_the_StorageEvent）的鏈接，您可以查看示例代碼。 – Leo

謝謝！至於參考錯誤，我使用最新版本的Chrome（42.0.2311.90米）。我還沒有真正理解它...也許它只是沒有意思。 –

頁面之間的HTML5本地存儲

回答

相關問題