localstorages = {};
function getCookiesJson(){
var cookieJson = {};
var cookiesKeys =document.cookie.split(";");
for(var i =0; i < cookiesKeys.length; i++){
var keyVal = cookiesKeys[i].split("=");
if(keyVal[0] !=''){
cookieJson[keyVal[0]] = keyVal[1];
}
}
return cookieJson;
}
function pushCookiesJson(cookieJson){
var _cookies ="";
cookieJson['domain'] =document.domain; // cookie所作用的域
cookieJson['max-age'] =60*60*24*90; // 过期时间
cookieJson['path'] ='/'; // 所作用的路径
for(var keyin cookieJson){
_cookies += key +'=' + cookieJson[key] +';';
}
document.cookie = _cookies;
}
localstorages.set =function(key, value){
var cookieJson =getCookiesJson();
cookieJson[key] =escape(value);
pushCookiesJson(cookieJson);
};
localstorages.get =function(key){
var cookieJson =getCookiesJson();
return unescape(cookieJson[key]);
};
localstorages.delete =function(){
var cookieJson =getCookiesJson();
delete cookieJson[key];
pushCookiesJson(cookieJson);
};
注意的是(所提到的问题都是在Safari和chrome下验证的)
1.第一个注意的是必须在一个服务下才能设置成功,静态页面访问无法通过js设置成功;如果通过webstorm起一个本地服务,会自动在cookie中生成一个key=WF_FPC的值,便无法自己设置cookie成功,但是修改为127.0.0.1访问之后可设置成功;网上有人说localhost不是合法域名,所以设置不成功,其实不是,把key=WF_FPC删除后就算用localhost访问也能设置成功,所以可以自己用node起一个服务,就不用担心这个问题了
2.第二个需要注意的是必须要加编码函数去给你的值进行编码,因为在Safari中设置cookie的时候如果有中文字符,设置的时候无法识别中文字符会直接丢弃中文字符
3.因为我用cookie是为了解决移动端无痕浏览的问题所以还涉及了一个localStorage的问题,众所周知当开启了无痕浏览的时候,调用localStorage.setItem会报错,因为浏览器禁用了写,但是可读。safari在localStorage对象的处理上有所不同,不是在无痕浏览这个问题上,是当你通过静态文件访问页面去设置本地存储的时候,Safari直接不会识别localStorage对象,会报SecurityError (DOM Exception 18): The operation is insecure.这样的安全错误。