ローカルストレージデータを更新するためのjavascriptコードの記述方法

-1

私は編集プロファイルページで作業しています。ページには、ユーザーが最初にアカウントにサインアップしたときに入力したデータが表示されます。彼らは彼らの表示名とパスワードを変更すると、私はローカルストレージに同様に更新されるように保存したいと思います。ユーザーが1234年にベンとパスワードに名前を変更し、ローカルストレージは、私はコードを書くにはどうすればよいローカルストレージデータを更新するためのjavascriptコードの記述方法

{"username":"staff3","name":"ben","password":"1234"}

する必要があります例えば

{"username":"staff3","name":"alice","password":"123"}

：何が現在のローカルストレージを示し

この種の変更を行うには？私は学校のプロジェクトでこれをやっている答えとして、「パスワードを保存するのは悪い考えです」といったコメントをしないでください。

また、プロフィールページと呼ばれる別のページにユーザー情報を表示したいと思います。その情報はローカルストレージに保存された情報になり、プロファイルページ情報として表示したいと考えています。コードを書くには？

出典

2016-08-06 blackJack

https://stackoverflow.com/questions/38802777/how-to-i-write-the-javascript-codes-to-save-and-update-changes-of-data-in-local –

私はそれを助けることはできませんが、 "ローカルストレージにパスワードを保存することは非常に悪い考えです"と申し訳ありません。あなたの質問に答えるには： "この種の変更を行うためにコードを書くにはどうすればいいですか？"まず最初にお読みください：http://stackoverflow.com/help/how-to-ask –

-1

mysqlを使用することをお勧めします。 Mysqlを使用すると、大規模な（そして小さな）チャンクを簡単に操作できます。それでもファイル上でこれを行うには、作成した配列をテキストファイルに保存することをお勧めします。あなたが何かを変更したい場合は、ファイルを読み込み、JSON.parseを使用して結果を返し、ループして正しい配列を探し、値を変更します。すべての

まず、あなたはすでに存在しているかどうかを確認したい：次に、あなたは、単に今、私はあなたが達成することができますどのように説明させてファイルを削除して

で書かれたあなたの変更アレイに新しいものを作成する事は言いました私たちは内容を得ることができるように作成されたファイル。

<?php 
$filename = 'file.txt'; 

if (file_exists($filename)) { 
    $handle = fopen($filename, "r"); 
    $fc = fread($handle, filesize($filename)); 
    fclose($handle); 
}else{ 
    $fc = "none"; 
} 
?>

このコードは、あなたのwebsite.phpの名前file.txtをに位置している同じフォルダ内のファイルを検索します。そうするためには、PHPを使用します。それがファイルを見つけた場合、それはJavaScriptにこの情報を取得するには

に後で使用するために使用するコンテンツを取得します、我々は単に今、私たちはJavaScriptで変数を持っていることを、このライン

var filecontent = <?php echo json_encode($fc); ?>;

を使用して、我々情報を変更することができます。

まず、我々はテキストファイルで配列を作成し、その配列

if(contentarray!="none"){ 
    var contentarray = JSON.parse(filecontent); 
    contentarray.push(newentry); 
}else{ 
    contentarray[0] = newentry; 
}

に私たちの新しいデータを追加私たちがここで話している私たちのnewentryは、今、この

var newentry = {"username":"staff3","name":"alice","password":"123"};

ようになるはずです更新された配列を持っているので、jqueryを使ってファイルに書き出します。まず、ウェブサイトにjqueryを含める必要があります。そうするためには、このためには、私たちのjavascript

var text = JSON.stringify(contentarray); 
    $.ajax({ 
     url: "script.php", 
     method: "POST", 
     data: { data: text }, 
     success: function(result){ 
     if(result==1){ 
      alert("It worked!"); 
     }else{ 
      alert("It did not work!"); 
      console.log(result); 
     } 
     } 
    });

にこれで我々は意志、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

は、ファイルに書き込むページの（好ましくは）ヘッダにこの行を追加します。仕事に、あなたはscript.php

これはscript.phpがどのように見えるべきかであると呼ばれる新しいファイルを作成する必要があります

if(isset($_POST['data'])){ 
    $filename = 'file.txt'; //you want to use the same filename as above 
    @unlink($filename); //using the @ to not get an error if there is no file to delete, will be important later 
    $myfile = fopen("testfile.txt", "w"); 
    fwrite($myfile, $_POST['data']); 
    fclose($myfile); 
    echo '1'; 
}

私が何かを逃したか、それはあなたにエラーを与えるだけでそれを言う、私はちょっと急いでこれを書いた:)

出典

2016-08-06 11:24:18 RPaul

私は以前にmysqlを使ったことがありませんJavaScriptの部分？ – blackJack

私はMySQLの使用がおそらく行く方法であることに同意しますが、これはOPに尋ねられた質問に答えることはできません。 –

Mysqlはデータベースを管理するために使用される別個のシステムです。あなたのケースでは、これは学校プロジェクトで商用ウェブサイトではないので、まだ心配なくjavascriptファイルを使用できるはずです – RPaul

警告した場合 - localStorageはすべてのブラウザでサポートされていません。 Check browser compatibility list。

警告2 - 本番でスニペットを使用しないでください。これは、デモンストレーションの目的のためだけに、物事の仕組みを示すことです。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

<form id="profile_details"> 
<p>Username: <input type="text" name="username"> 
<p>Name: <input type="text" name="name"> <label>New name: </label><label id="new_name"></label> 
<p>Password: <input type="password" name="password"> <label>New password: </label><label id="new_pwd"></label> 
<p><input id="sbmtbtn" type="button" value="Submit"> 
</form> 

<script type="text/javascript"> 
var userDb = localStorage; 
window.onload = function() { 
    document.querySelector("[name=username]").value = userDb.getItem("username") || "alice"; 
    document.querySelector("[name=name]").value = userDb.getItem("name") || "Alice" ; 
    document.querySelector("[name=password]").value = userDb.getItem("password") || "qwerty"; 
} 

document.getElementById("sbmtbtn").addEventListener("click", function(){ 
    var name = document.querySelector("[name=name]").value; 
    var password = document.querySelector("[name=password]").value; 
    document.getElementById("new_name").innerHTML = name; 
    document.getElementById("new_pwd").innerHTML = password.slice(0,1)+"...."; 
    userDb.setItem("name", name); 
    userDb.setItem("password", password); 
}); 
</script> 
</body> 
</html>

出典

2016-08-06 12:38:38 marmeladze

ローカルストレージデータを更新するためのjavascriptコードの記述方法

答えて

関連する問題