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. 【20180409】IT管理之IT十二条令

    团队越来越大,靠人管几乎有力无心,只能靠制度管理了. 前段时间对部门颁布了12条令,效果明显. 特此Mark. 汇报: 三条总结:汇报讲究精简,一个事情最多一句话概括. 一页报告:内容精简,报告一页w ...

  2. 再谈Promise

    方法 构造函数 接受的参数是一个带两个Function参数的函数,实际的异步代码编写在这个函数里,成功后调用第一个参数,失败调用第二个: Promise.prototype.catch 当构造函数里调 ...

  3. AI 名校课程&书籍 需要学习

    斯坦福李飞飞-深度学习计算机视觉 http://study.163.com/course/introduction/1003223001.htm 斯坦福李飞飞-深度学习计算机视觉---视频下载 htt ...

  4. CPU与GPU性能的比较报告

    运行时间分析 不同的模型在cpu和gpu下的时间差异较大,一般来说gpu会比cpu快5-20倍.我们选用了最常用的inception v3的分类模型,输入图片尺寸为:3x299x299. GPU 在一 ...

  5. [Linux性能调优] 磁盘I/O队列调度策略

    这两天的一个小任务是MongoDB服务器的调优,恰好这段时间对Linux的各种性能诊断.调优感兴趣,就顺着这个任务多翻了些书和文章. 新学到的一个东西是 Linux磁盘的I/O队列调度策略,至少MyS ...

  6. nginx+lua的基本原理概念介绍

    一. 概述 Nginx是一个高性能,支持高并发的,轻量级的web服务器.目前,Apache依然web服务器中的老大,但是在全球前1000大的web服务器中,Nginx的份额为22.4%.Nginx采用 ...

  7. 最简单的设计模式——单例模式的演进和推荐写法(Java 版)

    前言 如下是之前总结的 C++ 版的:软件开发常用设计模式—单例模式总结(c++版),对比发现 Java 实现的单例模式和 C++ 的在线程安全上还是有些区别的. 概念不多说,没意思,我自己总结就是: ...

  8. C语言 结构体中的零长度数组

    /* C语言零长度数组大小和取值问题 */ #include <stdio.h> #include <stdlib.h> #include <string.h> s ...

  9. SAP 生产订单变更管理 OCM Order Changement Management

    SAP OCM Order Changement Management  一.目的 订单变更管理系统是当我们的订单(生产订单.计划订单.采购订单)已经存在的时候,其物料主数据或销售数据有变更时,我们可 ...

  10. java面试复习题四

    一.redis最大缓存和回收策略 二.常用的数据库Druid线程池的参数设置 三.Spring的几大特性和应用 参考 Spring的核心特性就是IOC和AOP,IOC(Inversion of Con ...