pairs is the associative array
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
var pairs={};
window.onload=function() {
if(readCookie('wd')==null) {
document.getElementById('data').innerHTML = 'no cookie';
}
else {
var data = readCookie('wd');
data=data.split(',');
for(var i=0; i<data.length; i++){
var tmp=data[i].split('=');
pairs[tmp[0]]=tmp[1];
}
var f = document.myform;
var updated = '';
for (var i in pairs) {
updated += i+" : "+pairs[i]+"<br>";
}
document.getElementById('data').innerHTML = updated;
}
};
function saveValues() {
var f = document.myform;
pairs[f.elements['n'].value] = f.elements['v'].value;
var data = [];
for (i in pairs) {
data.push(i + "=" + pairs[i]);
}
createCookie('wd', data, 1);
location.reload(true);
}
// http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
</script>
<style type="text/css">
td {text-align:center;}
p {border:1px solid; width:10em;}
</style>
</head>
<body>
<h3>cookie values</h3>
<p id="data"></p>
<form action="#" name="myform">
<table>
<thead>
<tr><th>name</th><th>value</th></tr>
</thead>
<tbody>
<tr><td><input type="text" name="n"></td><td><input type="text" name="v"></td></tr>
</tbody>
<tfoot>
<tr><td colspan="2"><button type="button" onclick="saveValues();">update cookie</button></td></tr>
</tfoot>
</table>
</form>
</body>
</html>
