|zyciis| 如何用cookie来保存一个表对像，并实现增删改，谢谢

Question

比如有表
-------
ID 商品名称 价格
1  AA       100
2  BB       120
3  CC       130
-------
那如何用cookies保存上面的表呢，
并能实现增删改
谢谢

Answer 1

主要思路是json 对象转换成 字符串，存如cookie中。
读出cookie 的字符串 转换成 json 对象。删除对象使用 delete 

Answer 2

cookie有长度限制的
<script language="javascript">
Array.prototype.remove=function(n){if(isNaN(parseInt(n))) return false;if(n>=this.length || n<0) return false;for(i=n;i<this.length-1;i++) this[i]=this[i+1];this.pop();return true;}
Array.prototype.add=function(obj){this[this.length]=obj;}
Array.prototype.insert=function(n,o){if(isNaN(parseInt(n))) return false;if(n>=this.length || n<1) return false;for(i=this.length-1;i>=n;i--)this[i+1]=this[i];this[n]=o;return true;}String.prototype.Trim = function()
{
  return this.replace(/^\s+/g,"").replace(/\s+$/g,"");
}
  
function JSCookie()
{
    this.GetCookie = function(key)
    {
        var cookie = document.cookie;
        var cookieArray = cookie.split(';');
        var getvalue = "";
        for(var i = 0;i<cookieArray.length;i++)
        {
            if(cookieArray[i].Trim().substr(0,key.length) == key)
            {
                getvalue = cookieArray[i].Trim().substr(key.length + 1);
                break;
            }
        }
        return getvalue;
    };
    this.GetChild = function(cookiekey,childkey)
    {
        var child = this.GetCookie(cookiekey);
        var childs = child.split('&');
        var getvalue = "";
        
        for(var i = 0;i < childs.length;i++)
        {
            if(childs[i].Trim().substr(0,childkey.length) == childkey)
            {
                getvalue = childs[i].Trim().substr(childkey.length + 1);
                break;
            }
        }
        return getvalue;
    };
    this.SetCookie = function(key,value,expire,domain,path)
    {
        var cookie = "";
        if(key != null && value != null)
            cookie += key + "=" + value + ";";
        if(expire != null)
            cookie += "expires=" + expire.toGMTString() + ";";
        if(domain != null)
            cookie += "domain=" + domain + ";";
        if(path != null)
            cookie += "path=" + path + ";";
        document.cookie = cookie;
    };
    this.Expire = function(key)
    {
        expire_time = new Date();
        expire_time.setFullYear(expire_time.getFullYear() - 1);
        var cookie = " " + key + "=e;expires=" + expire_time + ";"
        document.cookie = cookie;
    }
}
var cookie;
var data;
var tb
function show(){
  var tb = document.createElement("table");
  tb.id="tbl";
  var tr = tb.insertRow();
  var td = tr.insertCell();
  td.innerHTML = "ID";
  td = tr.insertCell();
  td.innerHTML = "商品名称";
  td = tr.insertCell();
  td.innerHTML = "价格";
  td = tr.insertCell();
  td.innerHTML = "操作";
  
  for(var i=0;i<data.length;i++){
    tr = tb.insertRow();
   td = tr.insertCell();
   td.innerHTML = "<input value='" + data[i][0] + "' id='id" + i + "'>";
   td = tr.insertCell();
   td.innerHTML = "<input value='" + data[i][1] + "' id='name" + i + "'>";
   td = tr.insertCell();
   td.innerHTML = "<input value='" + data[i][2] + "' id='price" + i + "'>";
   td = tr.insertCell();
   td.innerHTML = "<input type='button' value='修改' onclick='update(" + i + ")'><input type='button' value='删除' onclick='del(" + i + ")'>";
  }
  var pad = document.getElementById("pad");
  pad.innerHTML = "";
  pad.appendChild(tb);
}
function add(){
var tb = document.getElementById("tbl");
   var i = tb.rows.length-1;
    var tr = tb.insertRow();
   var td = tr.insertCell();
   td.innerHTML = "<input value='' id='id" + i + "'>";
   td = tr.insertCell();
   td.innerHTML = "<input value='' id='name" + i + "'>";
   td = tr.insertCell();
   td.innerHTML = "<input value='' id='price" + i + "'>";
   td = tr.insertCell();
   td.innerHTML = "<input type='button' value='修改' onclick='update(" + i + ")'><input type='button' value='删除' onclick='del(" + i + ")'>";
   data.add(['','','']);
}
function update(n){
data[n][0] = document.getElementById("id"+n).value;
data[n][1] = document.getElementById("name"+n).value;
data[n][2] = document.getElementById("price"+n).value;
}
function del(n){
data.remove(n);
show();
}
function saveit(){
var s = "";
for(var i=0;i<data.length;i++){
s += "['" + data[i][0] + "','" + data[i][1] + "','" + data[i][2] + "']";
if(i!=data.length-1) s += ",";
}
s = "[" + s + "]";
var expire_time = new Date();
    expire_time.setFullYear(expire_time.getFullYear() + 1);
    cookie.SetCookie("data",s,expire_time);
}window.onload = function(){
  cookie = new JSCookie();
  var s = cookie.GetCookie("data");
  if(s == "") data = [];
  else eval("data=" + s);
  show();
}
</script>
<input type="button" value="添加" onclick="add()">
<input type="button" value="保存" onclick="saveit()">
<div id="pad"></div>

Answer 3

把数据以数组形式保存.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function setCookie(name,value)
{
    var d = 365, expires = new Date( new Date().getTime() + d * 24 * 60 * 60 * 1000 );
    document.cookie = name + "=" + escape (value) + ";expires=" + expires.toGMTString();
}
function getCookie(name)     
{
    var val = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    return (val ? unescape(val[2]) : null);
}
function delCookie(name)
{
    var expires = new Date( new Date().getTime() - 1 ), val = getCookie(name);
    val && (document.cookie= name + "=" + val + ";expires=" + expires.toGMTString());
}
function $(id){
return document.getElementById(id);
}window.onload = function(){
var data = getCookie("data"), arr;
if(data){
data = eval(data);
for(var i = 0; i < data.length; i++ ){
insertRow(data[i][0], data[i][1], data[i][2]);
}
}
};
function saveData(){
var i, j, tb = $("tb"), data = [];
data.push("[");
for( i = 1; i < tb.rows.length; i++ ){
if( i > 1 ){
data.push(",");
}
data.push("[");
for( j = 0; j < tb.rows[i].cells.length; j++ ){
if( j > 0 ){
data.push(",");
}
data.push("'" + tb.rows[i].cells[j].innerHTML + "'");
}
data.push("]");
}
data.push("]");
setCookie("data", data.join(""));
}
function insertRow(id, name, price){
var tb = $("tb"), tr = tb.rows[0].cloneNode(true);
tb.tBodies[0].appendChild(tr);
tr.cells[0].innerHTML = id;
tr.cells[1].innerHTML = name;
tr.cells[2].innerHTML = price;
}
function add(){
var tb = $("tb"), name = $("txtName").value, price = $("txtPrice").value, id = $("txtID").value;
var tr = tb.rows[0].cloneNode(true);
if( !id ){
id = parseInt(tb.rows[tb.rows.length - 1].cells[0].innerHTML, 10) + 1;
id = id ? id : 1;
}
insertRow(id, name, price);
saveData();
}
function del(){
var tb = $("tb"), id = $("delID").value;
if(id == ""){
return;
}
for(var i = 1; i < tb.rows.length; i++ ){
if(tb.rows[i].cells[0].innerHTML == id){
tb.tBodies[0].removeChild(tb.rows[i]);
saveData();
return;
}
}
}
</script>
</head><body>
<table width="400" border="1" cellspacing="0" cellpadding="0" id="tb">
  <tr>
    <td>ID</td>
    <td>商品名称</td>
    <td>价格</td>
  </tr>
</table>
<br />
<input type="text" id="txtID" value="" size="4" /> - <input type="text" id="txtName" value="" /> - <input type="text" id="txtPrice" size="6" /> 
<input type="button" name="btnAdd" onclick="add()" value="添加一行" /> <br />
ID: <input type="text" id="delID" value="" size="4" /> - <input type="button" name="btnDel" onclick="del()" value="删除一行" />
</body>
</html>

Answer 4

如果其他浏览器禁用cookie该如何是好呢？