JavaScript 保存数组到 Cookie 的完整实现与编码处理

JavaScript 保存数组到 Cookie 的方法

在 JavaScript 环境中，数组无法像 PHP 那样直接作为 Cookie 值存储。因此，必须先将数组转换为字符串格式，再写入 Cookie。对于简单的一维数组，直接调用 toString() 或 join() 方法即可完成转换。

toString() 是 JavaScript 对象的一个内置方法，用于返回该对象的字符串表示形式。

其标准调用语法为：objectname.toString([radix])。

其中，objectname 为必选参数，指代需要转换为字符串表示的目标对象。

radix 为可选参数，用于指定在将数字值转换为字符串时所采用的进制基数。

join() 是数组对象提供的另一个常用方法。

其调用格式为：objArray.join(seperator)。

该方法的作用是使用指定的分隔符（seperator）将数组元素连接成一个字符串。当分隔符设为逗号时，其行为与 toString() 基本一致。

多维数组与 JSON 序列化

若涉及多维数组或复杂对象，单纯使用字符串连接方法已不足够，此时应引入 JSON 格式进行处理。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。其规范基于 JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999 的一个子集。JSON 采用完全独立于语言的文本格式，但使用了类似于 C 语言家族（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）的习惯。这些特性使 JSON 成为理想的数据交换语言。

为实现 JavaScript 中的 JSON 处理，可借助 PHP2JS 函数库。该库提供了 json_decode（将 JSON 字符串转换为数组）和 json_encode（将数组转换为 JSON 字符串）两个核心函数，其逻辑与 PHP 中的同名函数类似。

值得注意的是，JavaScript 在保存 Cookie 时会自动过滤部分特殊字符，例如将左大括号“{”转换为“{_”，右大括号“}”转换为“}_”等。因此，在读取 Cookie 后，必须通过正则表达式过滤掉这些被转义的字符，否则调用 json_decode 解析时会报错。

以下是一个具体的实现示例，展示了如何构建、保存和读取包含多维数据的 Cookie。

 
<script type="text/javascript">
function setCookie(name, value){
document.cookie = name + "="+ value;
} 
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return '';
} 
function savecookie(){
var dc = {};
dc['a'] = {};
dc['a']['x'] = 'ax';
dc['a']['y'] = 'ay';
dc['a']['z'] = 'az';
dc['b'] = {};
dc['b']['x'] = 'bx';
dc['b']['y'] = 'by';
dc['b']['z'] = 'bz';
var cdc = json_encode(dc);
setCookie('testcookie', cdc);
} 
function clearcookie(){
setCookie('testcookie', '');
} 
function readcookie(){
var cdc = getCookie('testcookie');
cdc = cdc.replace(/,_/g, ',');
cdc = cdc.replace(/{_/g, '{');
cdc = cdc.replace(/_}/g, '}');
var dc = json_decode(cdc);
for(i in dc){
for(j in dc[i]){
document.write(i +':'+ j +':'+ dc[i][j] +'<br>');
        } 
    } 
} 
function json_decode(str_json) {
// Decodes the JSON representation into a PHP value
// 
// version: 906.1806
// discuss at: http://phpjs.org/functions/json_decode
// + original by: Public Domain (http://www.json.org/json2.js)
// + reimplemented by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: T.J. Leahy
// * example 1: json_decode('[\n "e",\n {\n "pluribus": "unum"\n}\n]');
// * returns 1: ['e', {pluribus: 'unum'}]
/* 
http://www.JSON.org/json2.js
2008-11-19
Public Domain.
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
See http://www.JSON.org/js.html
*/ 
var json = this.window.JSON;
if (typeof json === 'object' && typeof json.parse === 'function') {
return json.parse(str_json);
} 
var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
var j;
var text = str_json;
// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.
cx.lastIndex = 0;
if (cx.test(text)) {
text = text.replace(cx, function (a) {
return '\\u' +
('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}); 
} 
// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with '()' and 'new'
// because they can cause invocation, and '=' because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.
// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
// replace all simple value tokens with ']' characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or ']' or
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
if (/^[\],:{}\s]*$/.
test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.
j = eval('(' + text + ')');
return j;
} 
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError('json_decode');
} 
function json_encode(mixed_val) {
// Returns the JSON representation of a value
// 
// version: 906.1806
// discuss at: http://phpjs.org/functions/json_encode
// + original by: Public Domain (http://www.json.org/json2.js)
// + reimplemented by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: T.J. Leahy
// * example 1: json_encode(['e', {pluribus: 'unum'}]);
// * returns 1: '[\n "e",\n {\n "pluribus": "unum"\n}\n]'
/* 
http://www.JSON.org/json2.js
2008-11-19
Public Domain.
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
See http://www.JSON.org/js.html
*/ 
var json = this.window.JSON;
if (typeof json === 'object' && typeof json.stringify === 'function') {
return json.stringify(mixed_val);
} 
var value = mixed_val;
var quote = function (string) {
var escapable = /[\\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
var meta = { // table of character substitutions
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'"' : '\\"', 
'\\': '\\\\' 
}; 
escapable.lastIndex = 0;
return escapable.test(string) ?
'"' + string.replace(escapable, function (a) {
var c = meta[a];
return typeof c === 'string' ? c :
'\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}) + '"' : 
'"' + string + '"';
}; 
var str = function(key, holder) {
var gap = '';
var indent = ' ';
var i = 0; // The loop counter.
var k = ''; // The member key.
var v = ''; // The member value.
var length = 0;
var mind = gap;
var partial = [];
var value = holder[key];
// If the value has a toJSON method, call it to obtain a replacement value.
if (value && typeof value === 'object' &&
typeof value.toJSON === 'function') {
value = value.toJSON(key);
} 
// What happens next depends on the value's type.
switch (typeof value) {
case 'string':
return quote(value);
case 'number':
// JSON numbers must be finite. Encode non-finite numbers as null.
return isFinite(value) ? String(value) : 'null';
case 'boolean':
case 'null':
// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce 'null'. The case is included here in
// the remote chance that this gets fixed someday.
return String(value);
case 'object':
// If the type is 'object', we might be dealing with an object or an array or
// null.
// Due to a specification blunder in ECMAScript, typeof null is 'object',
// so watch out for that case.
if (!value) {
return 'null';
} 
// Make an array to hold the partial results of stringifying this object value.
gap += indent;
partial = [];
// Is the value an array?
if (Object.prototype.toString.apply(value) === '[object Array]') {
// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.
length = value.length;
for (i = 0; i < length; i += 1) {
partial[i] = str(i, value) || 'null';
} 
// Join all of the elements together, separated with commas, and wrap them in
// brackets.
v = partial.length === 0 ? '[]' :
gap ? '[\n' + gap +
partial.join(',\n' + gap) + '\n' +
mind + ']' :
'[' + partial.join(',') + ']';
gap = mind;
return v;
} 
// Iterate through all of the keys in the object.
for (k in value) {
if (Object.hasOwnProperty.call(value, k)) {
v = str(k, value);
if (v) {
partial.push(quote(k) + (gap ? ': ' : ':') + v);
} 
} 
} 
// Join all of the member texts together, separated with commas,
// and wrap them in braces.
v = partial.length === 0 ? '{}' :
gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
mind + '}' : '{' + partial.join(',') + '}';
gap = mind;
return v;
} 
}; 
// Make a fake root object containing our value under the key of ''.
// Return the result of stringifying the value.
return str('', {
'' : value
}); 
} 
savecookie();
readcookie();
</script>

中文乱码处理与 Base64 编码方案

此外，还需注意中文字符在 Cookie 中可能出现的乱码问题。建议对包含多字节字符及中文的数据，先进行 Base64 编码后再存入 Cookie，读取时再进行解码。

 
<script type="text/javascript">
function base64_decode( data ) {
// Decodes string using MIME base64 algorithm
// 
// version: 905.3122
// discuss at: http://phpjs.org/functions/base64_decode
// + original by: Tyler Akins (http://rumkin.com)
// + improved by: Thunder.m
// + input by: Aman Gupta
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// + bugfixed by: Pellentesque Malesuada
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + input by: Brett Zamir (http://brett-zamir.me)
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// - depends on: utf8_decode
// * example 1: base64_decode('S2V2aW4gdmFuIFpvbm5ldmVsZA==');
// * returns 1: 'Kevin van Zonneveld'
// mozilla has this native
// - but breaks in 2.0.0.12!
//if (typeof this.window['btoa'] == 'function') {
// return btoa(data);
//} 
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, ac = 0, dec = "", tmp_arr = [];
if (!data) {
return data;
} 
data += '';
do { // unpack four hexets into three octets using index points in b64
h1 = b64.indexOf(data.charAt(i++));
h2 = b64.indexOf(data.charAt(i++));
h3 = b64.indexOf(data.charAt(i++));
h4 = b64.indexOf(data.charAt(i++));
bits = h1<<18 | h2<<12 | h3<<6 | h4;
o1 = bits>>16 & 0xff;
o2 = bits>>8 & 0xff;
o3 = bits & 0xff;
if (h3 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1);
} else if (h4 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1, o2);
} else {
tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
} 
} while (i < data.length);
dec = tmp_arr.join('');
dec = this.utf8_decode(dec);
return dec;
} 
function base64_encode( data ) {
// Encodes string using MIME base64 algorithm
// 
// version: 905.2617
// discuss at: http://phpjs.org/functions/base64_encode
// + original by: Tyler Akins (http://rumkin.com)
// + improved by: Bayron Guevara
// + improved by: Thunder.m
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Pellentesque Malesuada
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// - depends on: utf8_encode
// * example 1: base64_encode('Kevin van Zonneveld');
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
// mozilla has this native
// - but breaks in 2.0.0.12!
//if (typeof this.window['atob'] == 'function') {
// return atob(data);
//} 
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, ac = 0, enc="", tmp_arr = [];
if (!data) {
return data;
} 
data = this.utf8_encode(data+'');
do { // pack three octets into four hexets
o1 = data.charCodeAt(i++);
o2 = data.charCodeAt(i++);
o3 = data.charCodeAt(i++);
bits = o1<<16 | o2<<8 | o3;
h1 = bits>>18 & 0x3f;
h2 = bits>>12 & 0x3f;
h3 = bits>>6 & 0x3f;
h4 = bits & 0x3f;
// use hexets to index into b64, and append result to encoded string
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
} while (i < data.length);
enc = tmp_arr.join('');
switch( data.length % 3 ){
case 1:
enc = enc.slice(0, -2) + '==';
break;
case 2:
enc = enc.slice(0, -1) + '=';
break;
} 
return enc;
} 
function utf8_encode ( argString ) {
// Encodes an ISO-8859-1 string to UTF-8
// 
// version: 905.1217
// discuss at: http://phpjs.org/functions/utf8_encode
// + original by: Webtoolkit.info (http://www.webtoolkit.info/)
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: sowberry
// + tweaked by: Jack
// + bugfixed by: Onno Marsman
// + improved by: Yves Sucaet
// + bugfixed by: Onno Marsman
// * example 1: utf8_encode('Kevin van Zonneveld');
// * returns 1: 'Kevin van Zonneveld'
var string = (argString+'').replace(/\r\n/g, "\n").replace(/\r/g, "\n");
var utftext = "";
var start, end;
var stringl = 0;
start = end = 0;
stringl = string.length;
for (var n = 0; n < stringl; n++) {
var c1 = string.charCodeAt(n);
var enc = null;
if (c1 < 128) {
end++;
} else if((c1 > 127) && (c1 < 2048)) {
enc = String.fromCharCode((c1 >> 6) | 192) + String.fromCharCode((c1 & 63) | 128);
} else {
enc = String.fromCharCode((c1 >> 12) | 224) + String.fromCharCode(((c1 >> 6) & 63) | 128) + String.fromCharCode((c1 & 63) | 128);
} 
if (enc !== null) {
if (end > start) {
utftext += string.substring(start, end);
} 
utftext += enc;
start = end = n+1;
} 
} 
if (end > start) {
utftext += string.substring(start, string.length);
} 
return utftext;
} 
function utf8_decode ( str_data ) {
// Converts a UTF-8 encoded string to ISO-8859-1
// 
// version: 905.3122
// discuss at: http://phpjs.org/functions/utf8_decode
// + original by: Webtoolkit.info (http://www.webtoolkit.info/)
// + input by: Aman Gupta
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Norman "zEh" Fuchs
// + bugfixed by: hitwork
// + bugfixed by: Onno Marsman
// + input by: Brett Zamir (http://brett-zamir.me)
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// * example 1: utf8_decode('Kevin van Zonneveld');
// * returns 1: 'Kevin van Zonneveld'
var tmp_arr = [], i = 0, ac = 0, c1 = 0, c2 = 0, c3 = 0;
str_data += '';
while ( i < str_data.length ) {
c1 = str_data.charCodeAt(i);
if (c1 < 128) {
tmp_arr[ac++] = String.fromCharCode(c1);
i++;
} else if ((c1 > 191) && (c1 < 224)) {
c2 = str_data.charCodeAt(i+1);
tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = str_data.charCodeAt(i+1);
c3 = str_data.charCodeAt(i+2);
tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
} 
} 
return tmp_arr.join('');
} 
</script>

上述代码中，base64_decode 函数依赖 utf8_decode 进行解码，而 base64_encode 函数依赖 utf8_encode 进行编码。

该方案属于开源项目 PHP2JS，旨在将部分 PHP 函数功能移植到 JavaScript 环境中。