Adding a personalized welcome message
2015-06-25 22:47
85 查看
Next we will add another bit of code, to change the page's title to include a personalized welcome message when the user first navigates to the site. This welcome message will persist when the user leaves the site and then comes back. We will also include an option to change the user and therefore the welcome message anytime it is required.
In
index.html, add the following line just before the
<script>element:
<button>Change user</button>
In
main.js, add the following code at the bottom of the file, exactly as written — this grabs references to the new button we added and the heading, and stores them in variables:
var myButton = document.querySelector('button'); var myHeading = document.querySelector('h1');
Now add the following function to set the personalized greeting — this won't do anything yet, but we'll use it later on:
function setUserName() { var myName = prompt('Please enter your name.'); localStorage.setItem('name', myName); myHeading.innerHTML = 'Mozilla is cool, ' + myName; }
This function contains a
prompt()function, which brings up a dialog box, a bit like
alert()except that
prompt()asks the user to enter some data, and stores that data in a variable after the user presses OK. In this case, we are asking the user to enter their name. Next, we call on an API called
localStorage, which allows us to store data in the browser and retrieve it later on. We use localStorage's
setItem()function to create and store a data item called
'name', and set its value to the
myNamevariable that contains the name the user entered. Finally, we set the
innerHTMLof the heading to a string, plus the user's name.
Next, add this
if ... elseblock — we could call this the initialization code, as it sets up the app when it first loads:
if(!localStorage.getItem('name')) { setUserName(); } else { var storedName = localStorage.getItem('name'); myHeading.innerHTML = 'Mozilla is cool, ' + storedName; }
This block first uses the negation operator (logical NOT) to check whether the
namedata item exists. If not, the
setUserName()function is run to create it. If so (i.e. the user set it during a previous visit), we retrieve the stored name using
getItem()and set the
innerHTMLof the heading to a string, plus the user's name, the same as we did inside
setUserName().
Finally, put the below
onclickevent handler on the button, so that when clicked the
setUserName()function is run. This allows the user to set a new name whenever they want by pressing the button:
myButton.onclick = function() { setUserName(); }
Now when you first visit the site, it'll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!
相关文章推荐
- word2vec模型解析
- linux回到用户上次所在目录/上一级目录/用户家目录/顶级目录
- Linux下gaogent使用指南
- 下拉刷新对象RefreshObject
- Oracle数据库漏洞分析:无需用户名和密码进入你的数据库
- 怎样把oracle表中的某一行数据给删除掉
- java学习之旅20--while语句_dowhile语句
- NoSQL类型、适用场景及使用公司
- 读《高性能javascript》笔记(一)
- LeetCode——Kth Largest Element in an Array
- javascript深入理解js闭包
- Supercharging our example website
- OSPF LSA类型详解
- linux中的strings命令简介
- openCV读入图片,openGL实现纹理贴图
- CDN(代理)服务器架构图
- pl/sql 控制结构笔记
- Bootstrap系列 -- 27. 下拉菜单对齐方式
- 使用AsyncTask的 误区
- Nmap 源码学习四 软件简单使用