第139天：详解cookie、 sessionStorage 和localStorage

半指温柔乐

发布于 2018-09-11 10:11:29

6290

发布于 2018-09-11 10:11:29

文章被收录于专栏：前端知识分享

1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。

2.HTML5 提供了两种在客户端存储数据的新方法：(http://www.w3school.com.cn/html5/html_5_webstorage.asp)...两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；

localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：

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

下面的例子对用户访问页面的次数进行计数：

1 <script type="text/javascript">
2 if (localStorage.pagecount){
3   localStorage.pagecount=Number(localStorage.pagecount) +1;
4   }
5 else{
6   localStorage.pagecount=1;
7   }
8 document.write("Visits "+ localStorage.pagecount + " time(s).");
9 </script>

sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。
创建并访问一个 sessionStorage：

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

下面的例子对用户在当前 session 中访问页面的次数进行计数：

1 <script type="text/javascript">
2 if (sessionStorage.pagecount){
3   sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
4   }
5 else{
6   sessionStorage.pagecount=1;
7   }
8 document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
9 </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-01-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

存储