本地存储问题 你好。 我正在youtube上做一个phonegap todolist教程,并使用Ripple进行测试。
当我尝试保存到本地存储时,我会收到错误。有什么我需要打开,设置或安装?
这些是我的控制台中的错误:
ripple.js:37 Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
ripple.js:50 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
ripple.js:50 GET http://localhost:8000/config.xml 404 (File not found) (anonymous function) @ ripple.js:50module.exports.initialize @ ripple.js:50_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13(anonymous function) @ ripple.js:38
ripple.js:50 POST http://localhost:8000/ripple/user-agent 501 (Unsupported method ('POST'))(anonymous function) @ ripple.js:50setUserAgent @ ripple.js:39_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13_baton.pass @ ripple.js:13(anonymous function) @ ripple.js:38
ripple.js:37 cordova :: Setting the user agent server side failed.
ripple.js:37 cordova :: Initialization Finished (Make it so.)
localhost/:8 The key "target-densitydpi" is not supported.
ripple.js:37 cordova :: fired deviceready event!
这是index.js
//save to local storage
var taskList = new Array();
$( document ).ready(function(){
//add to list from input
var $newTaskInput = $('#newTaskInput');
var $taskList = $('#taskList');
//Touch events for swipe left and right
var taskTouchStart;
var taskTouchEnd;
var taskTouchStartX;
var taskTouchEndX;
//save to local storage
//check if device allows local storage
if(window.localStorage)
{
taskList = JSON.parse(window.localStorage.getItem('taskList'));
}
if(null !== taskList)
{
//loop through stored data.
for(i=0;i<taskList.length;i++)
{
//add saved data
var newTask = '<li data-key="' + taskList[i].key + '"><span>' + taskList[i].task + '</span></li>';
$taskList.append(newTask);
}
} else {
//list empty
taskList = new Array();
}
//add to list in ui
$('#addNewTask').on('click', function() {
//use date instead of index to identify each task
var key = Date.now();
//add to list from input and add the date to each li as a key.
var newTask = '<li data-key="' + key + '"><span>' + $newTaskInput.val() + '</span></li>';
$taskList.append( newTask );
//add stored data array
$taskList.push({key:key, task:$newTaskInput.val(), done:false}); //the key for key is key on line29
//save it
if(window.localStorage)
{
window.localStorage.setItem('taskList', JSON.stringify(taskList) ); //convert array in to a string
}
//if clicked without input. val is empty
$newTaskInput.val('');
});
//TOUCH START
$taskList.on('touchstart', 'li', function(e){ //e means each
//make the position 0 for x and y where you touch.
var start = document.elementFromPoint( e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY);
//get the id(Key) of the li touched
taskTouchStart = $(start).attr('data-key');
//get the start position
taskTouchStartX = e.originalEvent.touches[0].pageX;
});
//TOUCH END
$taskList.on('touchend', 'li', function(e){ //e means each
var $end;
var $this = $(this);
var end = document.elementFromPoint( e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY);
$end = $(end);
//get the id(Key) of the li touched
taskTouchEnd = $end.attr('data-key');
//get the end position
taskTouchEndX = e.originalEvent.touches[0].pageX;
//get id again to make sure its the same.
if( taskTouchStart == taskTouchEnd )
{
// swipe right to add class
// swipe right a second time to remove it
if( taskTouchStartX < taskTouchEndX )
{
if($this.hasClass('done'))
{
$this.removeClass('done');
//alert("remove");
} else {
$this.addClass('done');
//alert("add");
}
}else{
//remove from storage
taskList = $.grep(taskList, function(e){ return e.key != taskTouchEnd;}); //return if key is different
//save again
if(window.localStorage)
{
window.localStorage.setItem('taskList', JSON.stringify(taskList) ); //convert array in to a string
}
//remove $end
$end.remove(); //remove current element
}
}
// to make sure it works
// inspect element - click resources
// on the left click the drop down for local storage and select http://localhost:8000
});
});
这是html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script>
if(navigator.userAgent.toLowerCase().indexOf('android') > -1)
document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
</script>
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>To Do List</title>
</head>
<body>
<div class="app">
<h1>To Do List </h1>
<div id="newTaskSection">
<input type="text" id="newTaskInput" placeholder="New Task"></input>
<button id="addNewTask">Add</button>
</div>
<ul id="taskList">
</ul>
</div>
<!-- <script type="text/javascript" src="cordova.js"></script> -->
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
感谢 瑞奇