demo:

链接:https://pan.baidu.com/s/1zhFHTv4P_epbBfpiggVDXg
提取码:aqts
要想有效果,必须发布在服务器上,可以在IIS上测试。

我只用到了中文和英文,想多语言的,就自己添加语言包

把select选择的语言也存在cookie中,刷新页面,也会记住选择

 <select id="ddlSomoveLanguage" onchange="chgLang();">
<option value="zh">中文</option>
<option value="en">ENGLISH</option>
</select>

language_cookie.js

var name = "somoveLanguage";
/*server*/
var ctx = window.document.location.href.substring(0, window.document.location.href.indexOf(window.document.location.pathname)); function chgLang() {
var value = $("#ddlSomoveLanguage").children('option:selected').val();
$('#ddlSomoveLanguage option:selected').text();
SetCookie(name, value);
//location.reload();
}
function SetCookie(name, value) {
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() +";path=/";
}
function getCookie(name)//取cookies函数
{
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[2])
} else {
return null;
}
}
var optionList = $("#ddlSomoveLanguage option");
var optionLength = optionList.length;
// 画面加载的时候,执行方法
window.onload = function () {
// 获得cookie,如果没有,默认为 zh
var value = getCookie(name);
value = value == undefined ? "zh" : value;
for (var i = 0; i < optionLength; i++) {
// 匹配 value,如果相同 value 则 selected 选中
if (optionList[i].value == value) {
optionList[i].selected = "selected";
}
}
}
//console.log(getCookie(name));
$(function () {
var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
if (uulanguage.indexOf("en") > -1) {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "en" });
} else if (uulanguage.indexOf("zh") > -1) {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "zh" });
} else {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "zh" });
};
if (getCookie(name) != "") {
if (getCookie(name) == "zh") {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "zh" });
}
if (getCookie(name) == "en") {
$("[data-localize]").localize("text", { pathPrefix: ctx + "/Content/lang", language: "en" });
}
} });

web前端,多语言切换,data-localize,的更多相关文章

  1. web网页多语言的实现方案_前端实现多语言切换

    实现的效果 需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示. 资源网站搜索大全https://55wd.com 实现步骤 1.在用户点击切换语言后,把 ...

  2. vue 双语言切换中,data内翻译文字不正常切换的解决方案

    背景 有这么一个登录页面,相关功能如下: 支持双语言,点击切换语言 表单内部有一个自定义的select,里面option的label.value都是的名字由外部提供:其中预设的option的label ...

  3. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  4. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

  5. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  6. Web前端错题模糊题记录

    title: Web前端错题模糊题记录 toc: true date: 2018-09-20 10:04:36 categories: Web tags: HTML CSS JavaScript HT ...

  7. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  8. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  9. Web前端上万字的知识总结

    下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习.大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每个字都是自己手敲的. 1.<html ...

  10. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

随机推荐

  1. Rabbit五种消息队列学习(二) – 简单队列

    队列结构图 P:消息的生产者 C:消息的消费者 红色:队列 生产者将消息发送到队列,消费者从队列中获取消息. 测试 1.连接MQ public static Connection getConnect ...

  2. Linux零基础入门第四课

    根据直播讲义整理的内容,从第四课开始.前三课的内容若后面有精力会一并整理进来. 文件的基本操作(上) 创建.删除.复制.移动和重命名 touch命令创建文件 语法 >$ touch file0 ...

  3. Java多线程系列——计数器 CountDownLatch

    简介: CountDownLatch 是一个非常实用的多线程控制工具类,通常用来控制线程的等待,它可以让某个线程等待直到倒计时结束 CountDownLatch 提供了两个主要的方法,await(). ...

  4. 快速入门 WePY 小程序【转】

    一.WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...

  5. C#时间格式化显示AM/PM

    .ToString("MM/dd/yyyy hh:mm:ss:ffff tt")); //12小时制 .ToString("MM/dd/yyyy HH:mm:ss:fff ...

  6. 链路追踪工具之Zipkin学习小记

    (接触了Zipkin,权将所了解或理解的记于此,以备忘) 分布式追踪系统 随着业务发展,系统拆分多个微服务.此时对于一个前端请求可能需要调用多个后端端服务才能完成,当整个请求变慢或不可用时,我们是无法 ...

  7. IntelliJ IDEA(2018)安装和破解

    IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具( ...

  8. Python学习小组微信群公告页面

    <简明 Python 教程>读经群,PDF地址:https://pan.baidu.com/s/1FK8s4cTfwWxSktOfS95ArQ,PyCharm-Edu地址:https:// ...

  9. Ajax替换局部DIV层

    <a href="addgoods.jsp" onclick="createRequest('addgoods.jsp','show');return false; ...

  10. 二、Sql Server 基础培训《进度2-关于主键(知识点学习)》

    学习作业2: 问题1:主键都有哪些方式?   问题2:本次实战案例建立的主键采用哪种方式?   问题3:猜猜金蝶K3WISE建立的主键采用哪种方式?   问题4:谈谈手工主键增长设置具体实现思路?(选 ...