如何永久更改外部文件.txt

我想更改我的文件.txt单击。例如，我写了这个：

目录：

<script type="text/javascript" src="file.txt"></script>

j查询：

 var counter = config.rans;
 var counter1 = config.bans;
$('.redanswer').one('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.open('PUT','file.txt', true);
    xhr.setRequestHeader('Content-Type','text/javascript; charset=utf-8');
    xhr.send( 'var config={"rans":' + ++counter + ',"bans":' + counter1 + '};' );
    $( '.rtotal' ).text( counter );
    $( '.btotal' ).text( counter1 );
});
$('.blueanswer').one('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.open('PUT','file.txt', true);
    xhr.setRequestHeader('Content-Type','text/javascript; charset=utf-8');
    xhr.send( 'var config={"rans":' + counter + ',"bans":' + ++counter1 + '};' );
    $( '.btotal' ).text( counter1 );
    $( '.rtotal' ).text( counter );
});

文件.txt：

var config={"rans":10,"bans":20};

单击此代码时，redanswer它会显示数字 11，因为它是 rans （10） + 1。但是，如果我重新加载页面并再次单击redanswer它已经显示数字 11，因为该文件.txt它没有被编辑。我想添加一段代码，单击redanswer时可以编辑文件.txt例如var config={"rans":11,"bans":20}; //10+1.

希望你能理解。谢谢。