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

这还是我第一次接触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环境下才可以实现，单纯的静态文件是不生效的。

效果截图：
中文：

英文：

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