使用HTML5 localStorage的更新，而不使用jQuery文件撰寫

我有一類「卡」的，這也是可拖動（一個div）一些文本。我正在使用localstorage來存儲包含卡片信息的數組。使用HTML5 localStorage的更新，而不使用jQuery文件撰寫

var cardID = 1; 
var cardValues = new Array(); 
var name = "Shifting Sliver"; 
var cost = "3U"; 
var text = "Sliver cannot be blocked except by slivers."; 
var power = "2"; 
var toughness = "2"; 

cardValues.push(name); 
cardValues.push(cost); 
cardValues.push(text); 
cardValues.push(power); 
cardValues.push(toughness); 

localStorage.setItem(cardID, cardValues.join(";")); 


var cardKey = localStorage.key(0); 
var getCardValues = localStorage.getItem(cardKey); 
values = getCardValues.split(";"); 
var name = values[0]; 
var cost = values[1]; 
var text = values[2]; 
var power = values[3]; 
var toughness = values[4]; 

function writeCard() 
{ 
    document.write('Card Name: ' + name + '<br />'); 
    document.write('Card Cost: ' + cost + '<br />'); 
    document.write('Card Text: ' + text + '<br />'); 
    document.write('Card Power: ' + power + '<br />'); 
    document.write('Card Toughness: ' + toughness); 
}

在HTML：

<div class="card"> 
    <div class="info"><script type='text/javascript'> writeCard(); </script></div> 
</div>

拖動卡後，鬆開鼠標時，文件撰寫導致整個頁面刷新，僅在文件撰寫的數據顯示。如何在不使用document.write的情況下將數據插入到卡上？

我想我需要使用DOM操作，但我有點究竟是如何被困在。

來源

2012-01-15 Pryomancer

你爲什麼不使用['document.innerHTML = '東西'，']（HTTP：// jsfiddle.net/B7aZc/）？在我看來，你正在使用舊的（'document.write'）方法和新技術，沒有任何特殊的原因。此外，我會傳入'writeCard（）'變量值，而不是全局值。 – 2012-01-15 20:07:07

又如：http://jsfiddle.net/B7aZc/2/ – 2012-01-15 20:15:49

和一些標稱的DOM操作：http://jsfiddle.net/B7aZc/3/ – 2012-01-15 20:22:27

不能使用document.write當文件裝載完成使用innerHTML代替 YPU也可以使用jQuery.append

來源

2012-01-15 20:47:15

使用HTML5 localStorage的更新，而不使用jQuery文件撰寫

回答

相關問題