html5 简书,HTML5存储

HTML5 web存储，一个比cookie更好的本地存储方式。

什么是html5 Web存储

使用HTML5可以在本地存储用户的浏览器数据。

早些时候，本地存储使用的是cookies.但是Web存储需要更加安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它可以存储大量数据，而不影响网站的性能。

数据以键值对存在，web网页的数据只允许该网页访问使用。

localStorage 和sessionStorage

localStorage ：没有时间限制的数据存储

sessionStorage：当浏览器等关闭了数据就消失了

在使用web存储前，应检查浏览器是否支持localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")

{

// Yes! localStorage and sessionStorage support!

// Some code.....

}

else

{

// Sorry! No web storage support..

}

localStorage对象存储没有时间限制：

localStorage.lastname="Smith";

document.getElementById("result").innerHTML="Last name: "+ localStorage.lastname;

下列例子记录了用户点击次数

if (localStorage.clickcount)

{

localStorage.clickcount=Number(localStorage.clickcount)+1;

}

else

{

localStorage.clickcount=1;

}

document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

if(sessionStorage.clickcount)

{

sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

}

else

{

sessionStorage.clickcount=1;

}

document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

sessionStorage 连续点击之后。再重新打开一个窗口又从新开始。

localStorage连续点击，再打开一个新的窗口会在之前点击数+1.