兩種表達(dá)歡迎信息（當(dāng)用戶首次登錄網(wǎng)站時(shí)许赃，存儲(chǔ)用戶輸入的名稱，在第二次進(jìn)入網(wǎng)站時(shí)馆类，根據(jù)存儲(chǔ)的信息歡迎用戶）的方式混聊。
1. localStorage創(chuàng)建歡迎信息
首先在HTML頁(yè)面中創(chuàng)建基本的信息：
<h1>Welcome</h1>
<button>Change user</button>
一級(jí)標(biāo)簽中的內(nèi)容是用來存儲(chǔ)歡迎信息，按鈕是用戶用來更換用戶名乾巧。
在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’參數(shù)
myHeading.innerHTML = 'Welcome '+myName;//將歡迎信息顯示在頁(yè)面中
}
//判斷用戶是否初次進(jìn)入網(wǎng)站
if(!localStorage.getItem('name')){
SetUserName();//如果不能獲取到用戶名句喜，證明初次進(jìn)入網(wǎng)站，從而調(diào)用獲取用戶名的方法
}else{
var storedName = localStorage.getItem('name');
myHeading.innerHTML = 'Welcome '+ storedName;//如果獲取到用戶名沟于，直接顯示歡迎信息
}
myButton.onclick = function(){
SetUserName();//用戶點(diǎn)擊按鈕更改用戶名
}
2. cookie創(chuàng)建歡迎信息
cookie 是存儲(chǔ)于訪問者的計(jì)算機(jī)中的變量咳胃。每當(dāng)同一臺(tái)計(jì)算機(jī)通過瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie旷太。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值展懈。
創(chuàng)建cookie和使用localStorage的方法大致相同，創(chuàng)建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)
}
}
}
接下來對(duì)以上代碼進(jìn)行逐步解析供璧。
假設(shè)一名新用戶第一次進(jìn)入網(wǎng)站存崖，在執(zhí)行checkCookie方法的時(shí)候?qū)?huì)走else代碼塊中的部分，網(wǎng)頁(yè)會(huì)顯示對(duì)話框讓用戶輸入姓名睡毒。
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)
}
}
}
用戶輸入不為空的用戶名以后執(zhí)行setCookie方法来惧，并傳入三個(gè)參數(shù)，分別是cookie名稱演顾，值以及過期天數(shù)」┎螅現(xiàn)將天數(shù)轉(zhuǎn)化為有效的日期隅居，然后將這三個(gè)天數(shù)存入document.cookie對(duì)象。
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())
}
當(dāng)用戶第二次進(jìn)入網(wǎng)站的時(shí)候會(huì)執(zhí)行g(shù)etCookie方法趁曼。首先檢查 document.cookie 對(duì)象中是否存有 cookie军浆。假如 document.cookie 對(duì)象存有某些 cookie，那么會(huì)繼續(xù)檢查我們指定的 cookie 是否已儲(chǔ)存挡闰。如果找到了我們要的 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 ""
}
以上是兩種方法的區(qū)別，cookie用起來相對(duì)來講不方便愧捕，而且有很多缺點(diǎn)：
（1）cookie可能被禁用奢驯。當(dāng)用戶非常注重個(gè)人隱私保護(hù)時(shí)，他很可能禁用瀏覽器的cookie功能次绘；
（2）cookie是與瀏覽器相關(guān)的瘪阁。這意味著即使訪問的是同一個(gè)頁(yè)面，不同瀏覽器之間所保存的cookie也是不能互相訪問的邮偎；
（3）cookie可能被刪除管跺。因?yàn)槊總€(gè)cookie都是硬盤上的一個(gè)文件，因此很有可能被用戶刪除禾进；
（4）cookie安全性不夠高豁跑。所有的cookie都是以純文本的形式記錄于文件中，因此如果要保存用戶名密碼等信息時(shí)泻云，最好事先經(jīng)過加密處理艇拍。
