这还是我第一次接触cookies的玩法,感觉很实用吧,想起以前开发阅读页面的时候无法保存用户的设置,真的是毫无头绪。目前要实现的功能是在不依靠后台语言的情况下,前台全局修改语言,或者根据不同的语言进行页面的跳转,对于搜索引擎而言,它是识别不出来,但是给访问的用户看倒是没问题了。另外我这些代码是用在织梦上,这个程序的页面都是静态,根本无法通过php去调用语言文件,所以只有js全局修改这个方案了。
这个模式很适合变通,字段也可以存很多,反正对于我而言很有参考价值。
实现方案如下:
1.首先在页面引入jquery和jqeury-cookies这两个js文件,其实用原生js也可以,但是我图方便和减少代码量。
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
2.定义语言包文件lang.js,只是部分案例。
$(function(){
var lang = $.cookie('language');
if(lang == "en"){
$(".lang1").text("Welcome");
$(".lang2").text("Member's center");
$(".lang3").text("Language");
$(".lang4").text("English");
$(".lang5").text("Chinese");
}
});
我是建议定义为class,只要有这个class的元素就会加载其它语言,全局都可以使用,而如果设置为id写入,那么只会识别到第一个。
3.然后记得加上最关键的语言切换方法,其实就是在cookies中存字段,让js读取这个字段的值进行加载
function en(){
$.cookie('language', 'en', { path: '/', expires: 10 });
window.location.reload();
}
function cn(){
$.cookie('language', 'cn', { path: '/', expires: 10 });
window.location.reload();
}
我设置为网站全局生效,十天时间过期,方法执行则修改cookies中language字段的值,这个值会被之前的lang.js读取识别。另外如果语言更多还可以继续增加,然后再lang.js里写更多判断。
4.在页面上增加执行方法的入口,我是两个a标签。
<a href="javascript:;" onclick="en();">English</a>
<a href="javascript:;" onclick="cn();">中文</a>
这样,用css美化以下就可以很好的用来执行方法了
注意,cookies的操作一般只有web环境下才可以实现,单纯的静态文件是不生效的。
效果截图:
中文:
英文:
规则之树版权所有,转载请注明来源,标明作者及原文链接
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/1162/