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 相关文章推荐
解密效果
Jun 23 Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
原生JavaScript实现随机点名表
Jan 14 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
pandas如何处理缺失值
2019/07/31 Python
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
学生请假条格式
2014/04/11 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
企业党员个人自我评价
2014/09/20 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
团代会开幕词
2015/01/28 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
Vue h函数的使用详解
2022/02/18 Vue.js
React四级菜单的实现
2022/04/08 Javascript