HTML5 在客户端存储数据

HTML5 在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。

//在客户端本地保存数据
localStorage.setItem("token", token);

//从客户端，获取存储的数据
var token = localStorage.getItem("token");
if(token == "null"){
    parent.location.href = baseURL + "login.html";
}

//删除本地数据
localStorage.removeItem("token");

使用列子

localStorage

用localStorage 的保存信息
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

对用户访问页面的次数进行计数，pagecount 一旦使用，不会被清除。（用户主动清除浏览器缓存除外）

<script type="text/javascript">

if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

　sessionStorage

保存一个sessionStorage的值

<script type="text/javascript">

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);

</script>

对用户在当前 session 中访问页面的次数进行计数：
当用户关闭浏览器窗口后，pagecount将会被清除。

<script type="text/javascript">

if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
    sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

</script>