HTML5存储

HTML5学习笔记 Web存储

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.

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 接上 关于HTML/HTML5(一)http://www.jianshu.com/p/33fc7840c079 学...
    Amyyy_阅读 4,260评论 0 4
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,375评论 1 45
  • HTML5 Web存储,一个比cookie更好的本地储存方式 HTML5 Web储存:使用HTML5可以在本地储存...
    龍飝阅读 2,532评论 0 1
  • 目录 客户端存储的说明 HTML5存储的说明 四种传统的存储方法 四种传统的存储方法 cache(缓存) 数据库 ...
    单纯的土豆阅读 4,108评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,159评论 0 3

友情链接更多精彩内容