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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
Ext 今日学习总结
Sep 19 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
jQuery的事件预绑定
Dec 05 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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调试的强悍利器之PHPDBG
2016/02/22 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
domReady的实现案例
2016/11/23 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
python批量生成本地ip地址的方法
2015/03/23 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
父母寄语大全
2014/04/12 职场文书
欢迎领导标语
2014/06/27 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python