chrome本地打开html页面cookie无效

最新推荐文章于 2022-12-28 15:04:27 发布

Mr-Hero

最新推荐文章于 2022-12-28 15:04:27 发布

阅读量8.7k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/lyj787505955/article/details/38079079

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这两天学习一个多语言功能的网页的测试，思路很简单：

1. 用cookie保存客户端选择的语种

2.刷新页面

3.读取刚才设置的cookie

设置和读取cookie函数

// JavaScript Document
var CookieUtil = {
	get: function(name){
		var cookieName = encodeURIComponent(name) + "=",
			cookieStart = document.cookie.indexOf(cookieName),
			cookieValue = null;
		if(cookieStart > -1){
			var cookieEnd = document.cookie.indexOf(";", cookieStart);
			if(cookieEnd == -1){
				cookieEnd = document.cookie.length;
			}
			cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
			return cookieValue;
		}
	},
	set: function (name, value, expires, path, domain, secure){
		var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
		
		if(expires instanceof Date){
			cookieText += ";expires=" + expires.toGMTString();
		}
		if(path){
			cookieText += ";path=" + path;
		}
		if(domain){
			cookieText += ";domain=" + domain;
		}
		if(secure){
			cookieText += ";secure";
		}
		document.cookie = cookieText;
	},
	unset: function(name, path, domain, secure){
		this.set(name, "", new Date(0), path, domain, secure);
	}
};

html 页面很简单，就一个select 下拉框

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="i18n.js"></script>
<script type="text/javascript" src="cookie.util.js"></script>
</head>
<body>
	<select id="i18n">
		<option value="fr">French</option>
		<option value="en">English</option>
		<option value="zh">简中</option>
	</select>	
	<div><span class="i18n-hello_world"></span></div>
	<div><span class="i18n-gamegoal_1"></span></div>
</body>
</html>

操作 js 代码

var Local = {
	get: function(){
		if (CookieUtil.get("lang")) {
			return CookieUtil.get("lang");
		}
	}
};

var i18n = function(){
	var lang, defaultLang = "en";
	var dictionaries = {
		"en": {"hello_world":"Hello World","gamegoal_1":"In SAME, your goal is to remove all balls in the grid."},
		"fr": {"hello_world":"Bonjour le monde","gamegoal_1":"Dans SAME, l'objectif est de retirer toutes les billes d'une grille."},
		"zh": {"hello_world":"嗨，我在这里","gamegoal_1":"我的成绩"}
	};

	var updateDOM = function(){
		var dict = dictionaries[lang] || dictionaries[defaultLang];
		for (var key in dict) {
			$(".i18n-" + key ).text(dict[key]);			
		};
	}

	return {
		init: function(){
			lang = Local.get() || defaultLang;
			updateDOM();
		},
		get: function(key){
			var dict = dictionaries[lang] || dictionaries[defaultLang];
			return "" + dict[lang];
		},
		updateDOM: updateDOM
	}
}();

$(document).ready(function(){
	i18n.init();
	if (CookieUtil.get("lang")) {
		$("#i18n").val(CookieUtil.get("lang"));
	};
	$("#i18n").change(function(){
		CookieUtil.set("lang",$(this).val(), new Date("January 1,2015"));
		location.reload();
	});
});

完之后直接双击html文件打开，在IE11和FF测试均没问题，但chrome也反应，此时的地址栏是 D:\www\i18n\i18n.html

后来就想到可能是chrome安全性导致的这个问题，换成localhost 方式访问，就OK了