JavaScript 保存数组到Cookie的代码


Posted in Javascript onApril 14, 2010

JavaScript中数组是无法直接保存为Cookie的(PHP可以),那要将数组转存为字符串,再保存在Cookie中,简单的一维数组我们直接用toString()或者join就可以了:
JavaScript中toString函数方法是返回对象的字符串表示。
使用方法:objectname.toString([radix])
其中objectname是必选项。要得到字符串表示的对象。
radix是可选项。指定将数字值转换为字符串时的进制。
join是其中一个方法。
格式:objArray.join(seperator)
用途:以seperator指定的字符作为分隔符,将数组转换为字符串,当seperator为逗号时,其作用和toString()相同。
如果多维数组,我们就要用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成为理想的数据交换语言。
这里我们使用PHP2JS的函数库来实现,需要 json_decode 和 json_encode这两个函数,懂PHP的朋友可以理解这两个函数的意思。json_decode 是JSON到数组,json_encode 是数组到JSON。
需要注意的是JavaScript 保存 Cookie 会将一些字符过滤,如:"{" 被过滤为 "{_" 等。所以在获取 Cookie 时要过滤这些字符,不然 json_decode 会出错。
下面简单举例如下:

<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 编码解码:
<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。

Javascript 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 #Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 #Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 #Javascript
JavaScript中的prototype使用说明
Apr 13 #Javascript
Js 刷新框架页的代码
Apr 13 #Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 #Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 #Javascript
You might like
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
jquery uaMatch源代码
2011/02/14 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
党员干部承诺书
2014/03/25 职场文书
测绘工程专业求职信
2014/07/15 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
英语导游词
2015/02/13 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书