How do I store the value of a javascript variable (without a server) externally?
Question
Lets say I am asking users (on my local machine) to input their email address to sign up for a raffle.
<!DOCTYPE HTML>
<head><title>Raffle</title></head>
<script type="text/javascript">
var email;
function foo(){
email = document.getElementById("Email").value;
alert(email);
}
</script>
<body>
<input id="Email" name="Email" type="email">
<input type="Submit" id="submit" name="submit" onclick="foo();">
</body>
Fiddle
When the user hits submit, the email address pops up in front of them. Is there any way to simultaneously store the variable email in an external file ( .php , .txt etc.)
3 answers
solution1
4 ACCPTED 2014-12-31 04:19:05
Without a server, the only persistence you're going to get from JavaScript is through cookies, local storage, or one of the client-side DB methods. (There are ways to write data to files but they are often more hassle than they're worth for such simple cases).
Simplest is local storage . This will keep a comma-separated string of all emails users have entered:
if (!localStorage.emails)
localStorage.emails = email;
else
localStorage.emails += ',' + email;
And then at subsequent page visits, you can retrieve the emails that users entered through the localStorage.emails variable.
solution2
1 2014-12-31 05:56:24
in your code you have make minor changes as i understand it
<!DOCTYPE HTML>
<head><title>Raffle</title></head>
<script type="text/javascript">
var email;
function foo(){
email = document.getElementById("Email").value;
/* this function stored your email variable to another php page as a variable name php_email */
$.post('anyphppagename.php',php_email:email,function(){
});
alert(email);
}
</script>
<body>
<input id="Email" name="Email" type="email">
<input type="Submit" id="submit" name="submit" onclick="foo();">
</body>
in another way you can show this value as to the user in your jquery script
<script type="text/javascript">
var email;
function foo(){
email = document.getElementById("Email").value;
alert(email);
$("#getemail").html(email);
$("#getemail").css("display","block");
}
</script>
<body>
<span id="getemail" style="display:none;"></span>
<input id="Email" name="Email" type="email">
<input type="Submit" id="submit" name="submit" onclick="foo();">
</body>
hopefully it may help you
solution3
0 2014-12-31 04:35:31
As I mentioned in the comments, you can use localStorage to persist values in a single browser .
If you want to store a list of e-mail addresses, your best bet is to store them as an array, and serialize that into localstorage
<!DOCTYPE HTML>
<head><title>Raffle</title></head>
<script type="text/javascript">
function storeEmail(email) {
var addressesSerialized = localStorage.emails || "[]";
var addresses = JSON.parse(addressesSerialized);
addresses.push(email);
localStorage.emails = JSON.stringify(addresses);
}
function foo(){
var email = document.getElementById("Email").value;
alert(email);
storeEmail(email);
}
</script>
<body>
<input id="Email" name="Email" type="email">
<input type="Submit" id="submit" name="submit" onclick="foo();">
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.