当前位置:秋叶网络博客 前端编程 ◊ H5的localStorage本地存储替代cookie

H5的localStorage本地存储替代cookie

作者:秋叶 发表时间:2015年7月16日

在客户端存储数据,之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

主要是使用了H5的localStorage 方法存储,它的神奇之处在于数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

它的js代码只有了了几行,简洁明了:

<script>
if (localStorage.pagecount)
{localStorage.pagecount=Number(localStorage.pagecount) +1;}
else{localStorage.pagecount=1;}
document.write("您已访问: " + localStorage.pagecount + " 次");
</script>

把这段脚本插到网页的任何地位让其开始计数吧!哈哈,
另外,localStorage还有以下方法:

localStorage.a = "www";//设置a为"www"
localStorage["a"] = "mizuiren";//设置a为"mizuiren",效果同上,将上面的a覆盖
localStorage.setItem("a",".com");//设置a为".com",效果同上,将上面的a覆盖
var b = localStorage.getItem("a");//获取a的值,并存在b里面
var b = localStorage["a"];//同上,将上面的b覆盖
var b = localStorage.a;//同上,将上面的b覆盖
localStorage.removeItem("a");//清除a的值

其中使用最多的是localStorage.setItem和localStorage.getItem,分别为设置和读取本地存储。

目录: 前端编程 | 标签: | 15614次阅读