2015-10-03 62 views
0

我试图创建一个程序使用飞镖保存html文件中的联系人。本地存储不工作 - 飞镖

这是我的代码中镖:

import 'dart:html'; 

void saveContact() { 
    Storage localStorage = window.localStorage; 

    var txtFirst = query("#firstname"); 
    String first = txtFirst.text; 
    var txtLast = query("#lastname"); 
    String last = txtLast.text; 
    var txtEmail = query("#email"); 
    String email = txtEmail.text; 
    var txtMobile = query("#mobile"); 
    String mobile = txtMobile.text; 
    var txtHome = query("#home"); 
    String home = txtHome.text; 
    var txtOffice = query("#office"); 
    String office = txtOffice.text; 

    var contact = { 
    "firstname" : first, 
    "lastname" : last, 
    "email" : email, 
    "mobile" : mobile, 
    "home" : home, 
    "office" : office 
    }; 

    localStorage.setItem(first + " " + last, JSON.stringify(contact)); 
    var test2 = JSON.parse(localStorage.getItem(first + " " + last)); 
    var result = query("#divContents"); 
    result.text = test2.tostring(); 
} 
void main() { 
    querySelector('#savecontacts').onClick.listen(saveContact); 
} 

我想输出的div的一个接触只是为了看看镖代码工作。但没有任何反应......请帮助。

+0

我没有用自己的localStorage尚,HTTPS://pub.dartlang。 org/packages/lawndart可能会提供一些想法如何使用它或此问题http://stackoverflow.com/questions/12062593/how-do-i-save-a-value-from-a-text-input-box-并加载它后来在飞镖/ 12062594#12062594 –

回答

1

这应该做你想要什么:

import 'dart:html'; 
import 'dart:convert' show JSON; 

void saveContact() { 
    Storage localStorage = window.localStorage; 
    // (... as InputElement) isn't actually necessary, 
    // it's just to silence the analyzer 
    var first = (querySelector("#firstname") as InputElement).value; 
    var last = (querySelector("#lastname") as InputElement).value; 
    var email = (querySelector("#email") as InputElement).value; 
    var mobile = (querySelector("#mobile") as InputElement).value; 
    var home = (querySelector("#home") as InputElement).value; 
    var office = (querySelector("#office") as InputElement).value; 

    var contact = { 
    "firstname" : first, 
    "lastname" : last, 
    "email" : email, 
    "mobile" : mobile, 
    "home" : home, 
    "office" : office 
    }; 

    localStorage['$first $last'] = JSON.encode(contact); 
    var test2 = JSON.decode(localStorage['$first $last']); 
    var result = querySelector("#divContents"); 
    result.text = test2.toString(); 
} 
void main() { 
    querySelector('#savecontacts').onClick.listen((_) { 
    saveContact(); 
    print('saved'); 
    }); 
} 

HTML我用这个例子

<!DOCTYPE html> 

<html> 
    <head> 
    </head> 
    <body> 

    <script type="application/dart" src="index.dart"></script> 
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' --> 
    <script src="packages/browser/dart.js"></script> 

    <input id="firstname"> 
    <input id="lastname"> 
    <input id="email"> 
    <input id="mobile"> 
    <input id="home"> 
    <input id="office"> 
    <button id="savecontacts">save</button> 
    <div> 
     <b>result</b> 
     <div id="divContents"></div> 
    </div> 

    </body> 
</html> 
+0

谢谢君特,但我试过了,仍然没有输出。我应该安装什么东西吗? (我的意思是除了Dart SDK和WebStorm之外) –

+0

不,这应该够了。我想这个问题在你的HTML中。可能是缺少或错误的Dart脚本标记。我可以发布自己的例子,但只能在几个小时内发布。我不在我的电脑上。在此期间,您可以添加更多的打印语句来确定代码是否全部执行,以及它是否符合您的期望。 –

+0

我解答了我的答案。 –