这是我的第一个应用。它将允许您创建一个条目,将该条目添加到列表中然后继续。
我遇到的问题是,如果我在将值设置为localstorage之后立即关闭应用程序,除非我给它5-10秒,否则它将无法保存。
实施例: 如果我输入1个名称,请单击“完成”,然后关闭所有应用程序。该应用程序将加载没有任何数据。如果我做同样的事情,但在关闭应用程序前等待5-10秒,当我打开应用程序时,它将拥有正确的数据。
同样可以说清楚。
在普通浏览器中测试时,一切正常。
**旁注:是的,我知道它正在为每个名字保存一堆HTML。我想用那种方式。除非这就是我遇到这个问题的原因,但我不认为这对我2周大的Tab S来说是个问题
这是我的代码
思想?
HTML / CSS
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>first app</title>
<style>
.clear {clear:both;}
#all_content {margin:20px 0 0 100px}
#new_char {margin-top:20px;}
#new_character_name_input_container{float:left;}
#new_character_name_button_container {float:left;}
#exsisting_char {display:none;}
#character_list {margin:20px 0 0 0;}
.character_name {float:left;}
</style>
</head>
<body>
<div id="all_content">
<div style="border-bottom:1px solid #000000; width:200px;">Items retrieved on load</div>
<div id="data_dump">
</div>
<input id="new_char" type="button" value="Create New Character">
<div id="character_list">
</div>
<div id="character_data">
</div>
<br><br><br><br>
<input id="clear_all" type="button" value="Clear All">
</div>
</body>
</html>
这是JS
$(document).ready(function() {
// get the characters
$('#data_dump').append('<div id="stored_character_list">'+window.localStorage.getItem('list_of_characters')+'</div>')
// get the characters
$('#character_list').append(window.localStorage.getItem('list_of_characters'))
// make a new character
$('#new_char').click(function() {
// keep inserting more than one new character entry
if ($('#all_content').html().indexOf('new_character_name_container') != -1){
// do nothing
}
else{
//insert input to enter new character
var new_charater_input_content = '<div id="new_character_name_container"><div id="new_character_name_input_container"><input id="new_character_name_input" type="text" value=""></div><div id="new_character_name_button_container"><input id="new_character_name_button" type="button" value="Done"></div><div id="exsisting_char">Cant Make Doubles</div><div class="clear"></div></div>'
$('#new_char').after(new_charater_input_content)
// animate the new character input onto the screen
$('#new_character_name_container').slideDown('fast')
// set focus on new input
$('#new_character_name_input').focus()
// add the new character to the localstorage new character value
$('#new_character_name_button').click(function() {
var new_charater = $('#new_character_name_input').val()
// append the new character to the bottom of the character listing
$('#character_list').append('<div class="character_list_item"><div class="character_name">'+new_charater+'</div></div>')
// save all the characters to storage
window.localStorage.setItem('list_of_characters', $('#character_list').html())
//alert(window.localStorage.getItem('list_of_characters'))
});
}
});
$('#clear_all').click(function() {
window.localStorage.clear();
});
});