网站利用cookies实现切换语言,案例整理

这还是我第一次接触cookies的玩法,感觉很实用吧,想起以前开发阅读页面的时候无法保存用户的设置,真的是毫无头绪。目前要实现的功能是在不依靠后台语言的情况下,前台全局修改语言,或者根据不同的语言进行页面的跳转,对于搜索引擎而言,它是识别不出来,但是给访问的用户看倒是没问题了。另外我这些代码是用在织梦上,这个程序的页面都是静态,根本无法通过php去调用语言文件,所以只有js全局修改这个方案了。
这个模式很适合变通,字段也可以存很多,反正对于我而言很有参考价值。
timg.jpg
实现方案如下:

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环境下才可以实现,单纯的静态文件是不生效的。

效果截图:
中文:
1.jpg
英文:
2.jpg

规则之树版权所有,转载请注明来源,标明作者及原文链接

发表评论
加载中...

相关文章