在HTML中记住用户区域设置选择的最简单方法
Easiest way of remembering user locale selection in HTML
我在自己的网站上工作了大约一周。我非常擅长HTML和CSS,但我仍在努力学习Javascript、JQuery和PHP。
基本上,我想做的是创建一种方法,根据用户在语言选择页面上的选择来记住用户的语言和区域设置。我想要的(如果可能的话)是让用户在/locale页面上选择他们的标志,并更改主页的url(即mysite.com/en-us
)。我将通过静态页面翻译我的网站内容,而不是主动翻译。
这只需要适用于主页,而不是后续页面,但如果它也适用于不同目录下的页面,那就太棒了。你可以在这里查看我新建的网站的实时示例。
我更喜欢Javascript或JQuery,但老实说,当别人在做困难的部分时,我真的没有权利挑剔。
事先非常感谢大家的帮助。
有两种方法可以实现这一点:Cookies或localStorage。最简单的是本地存储:
这里有两个简单的Javascript函数。第一个在bodyload上运行,并检查以前的语言选择(存储在localStorage中)是否为西班牙语。如果没有(或为空),欢迎语将以英语显示。
当你点击一个按钮时,它会运行第二个功能,它会更改欢迎语言并将选择存储在localStorage中。
HTML
<button onclick="language('en')">english</button>
<button onclick="language('spa')">spanish</button>
<h1><span id=welcome>text</span></h1>
JAVASCRIPT
document.getElementsByTagName("body")[0].onload=function(){session()};
function session() {
var result = localStorage.getItem("session");
if (result === 'spa') {
document.getElementById("welcome").innerHTML = "Hola!";
} else {
document.getElementById("welcome").innerHTML = "Hello!";
}
}
function language(key) {
if (key === 'en') {
document.getElementById("welcome").innerHTML = "Hello!";
localStorage.setItem("session", "en");
} else if (key === 'spa') {
document.getElementById("welcome").innerHTML = "Hola!";
localStorage.setItem("session", "spa");
}
}
Codepen DEMO
相关文章:
- 如何根据另一选择中的选择设置一个选择中的文本
- jQuery为按钮选择设置活动类
- 根据两个下拉菜单的选择设置隐藏值
- Bootstrap/AngularJs:如何为导航类的活动选择设置粗体属性
- Ember选择设置内容绑定
- KnockoutJS可观测值为't通过选择设置
- 3 选项从数据库中删除更改时选择设置值
- 如何根据下拉框选择设置文本框值
- 挖空 + 选择2 -- 设置默认值
- jQuery 验证 - 根据用户选择设置条件规则
- 使用角度引导选择设置下拉列表的选定选项
- 运行流星如何选择设置文件
- Dojo选择设置值不能与动态生成的选项一起工作
- 如何根据引导项选择设置变量
- 多重选择设置导致angular出错
- 具体化选择设置动态选项问题
- 表单:选择设置img src
- 基于列表框选择设置列表项
- 根据先前选择标记中的选择设置选择标记的可见性
- 如何根据下拉选择设置单选按钮值