两种表达欢迎信息（当用户首次登录网站时，存储用户输入的名称，在第二次进入网站时，根据存储的信息欢迎用户）的方式。
1. localStorage创建欢迎信息
首先在HTML页面中创建基本的信息：
<h1>Welcome</h1>
<button>Change user</button>
一级标签中的内容是用来存储欢迎信息，按钮是用户用来更换用户名。
在JavaScript部分中的代码如下：
var myHeading = document.querySelector('h1');//获取到h1元素
var myButton = document.querySelector('button');//获取到button元素
//获取用户名的方法
function SetUserName(){
var myName = prompt('Please enter your name');//通过弹出框使用户输入用户名
localStorage.setItem('name',myName);//将用户输入的用户名传给‘name’参数
myHeading.innerHTML = 'Welcome '+myName;//将欢迎信息显示在页面中
}
//判断用户是否初次进入网站
if(!localStorage.getItem('name')){
SetUserName();//如果不能获取到用户名，证明初次进入网站，从而调用获取用户名的方法
}else{
var storedName = localStorage.getItem('name');
myHeading.innerHTML = 'Welcome '+ storedName;//如果获取到用户名，直接显示欢迎信息
}
myButton.onclick = function(){
SetUserName();//用户点击按钮更改用户名
}
2. cookie创建欢迎信息
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
创建cookie和使用localStorage的方法大致相同，创建cookie的主要代码如下：
<body onLoad="checkCookie()"></body>
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
接下来对以上代码进行逐步解析。
假设一名新用户第一次进入网站，在执行checkCookie方法的时候将会走else代码块中的部分，网页会显示对话框让用户输入姓名。
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
用户输入不为空的用户名以后执行setCookie方法，并传入三个参数，分别是cookie名称，值以及过期天数。现将天数转化为有效的日期，然后将这三个天数存入document.cookie对象。
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
当用户第二次进入网站的时候会执行getCookie方法。首先检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
以上是两种方法的区别，cookie用起来相对来讲不方便，而且有很多缺点：
（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
