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 相关文章推荐
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
JS画线(实例代码)
Nov 20 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
13个PHP函数超实用
Oct 21 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
angularjs获取到My97DatePicker选中的值方法
Oct 02 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学习笔记 数组的常用函数
2011/06/13 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
WAF的正确bypass
2017/01/05 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python异常处理try except过程解析
2020/02/03 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
大学军训感言600字
2014/02/25 职场文书
春节联欢会主持词
2014/03/24 职场文书
追讨欠款律师函
2015/05/27 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
python数字类型和占位符详情
2022/03/13 Python