客户端存储之HTML5 web存储

最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别。

web存储与cookie的区别以及优势:

1、cookie只适合存储少量文本数据,而web存储可存储大量数据

2、以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地

3、web storage有更加丰富易用的接口,比如setItem()、getItem()、removeItem()、clear()等,使数据操作更简便;而cookie没有提供,需要通过document对象的cookie属性来完成

4、兼容性差异:cookie所有浏览器都支持,而web storage 在IE8下不支持

5、cookie默认的有效期很短暂,一旦用户关闭浏览器,cookie保存的数据就丢失了;但一旦设置cookie有效期,数据则会一直保存直到
失效期。在这点上,它与sessionStorage的区别是:cookie作用域不是局限在浏览器的单个标签页,而是整个浏览器进程。

web 存储 : localStorage、sessionStorage

web存储定义了两种对象:localStorage、sessionStorage,二者是以windows对象的属性形式存在,对于IE8以前的浏览器,可以用IE的userData作为H5 web存储的替代方案。

localStorage与sessionStorage区别:

二者的区别主要体现在有效期和作用域上。

1、在有效期上,localStorage是永久性的,除非用户或者开发者刻意删除,否则数据将一直存储在用户电脑上。而sessionStorage一旦窗口或者标签页关闭,通过sessionStorage存储的数据也将被删除。

2、在作用域上,二者都会受到文档源额限制,也就是说,非同源文档之间是无法共享本地存储的数据的;除了文档源额限制,localStorage还
会受到浏览器厂商的限制。举例来说,当前用Firefox打开一个站点,下次用Chrome打开同一站点,也无法访问上次存储的数据;除了文档源额限
制,sessionStorage还会受到窗口的限制。也就是说,即使是同源文档在浏览器的不同标签页时,他互相之间拥有的也是各自的
sessoionStorage对象。

时间: 2024-08-04 14:17:12

客户端存储之HTML5 web存储的相关文章

HTML5 Web存储 页面间进行传值

在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可以在本地存储用户的浏览数据.Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以“键/值”对存在, web网页的数据只允许该网页访问使用 方法: localStorage 和 sessionStorage

HTML5 Web存储(Web Storage)技术及用法

在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣,它就是Web存储(Web Storage).Web存储(Web Storage)提供了一个在浏览器端保存用户会话信息的方法.下面让我们来看一看Web存储(Web Storage)的基本用法! Web存储(Web Storage)基本要领 存储的数据可以是任何类JSON的结构化数据. 存储的数据不会

HTML5 web存储

HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 浏览器支持 Internet Explorer 8+, Firefox, Opera, C

加速HTML5应用的九大方法-------3.使用 HTML5 Web 存储

加速HTML5应用的九大方法-------3.使用 HTML5 Web 存储你需要在浏览器上存储一些数据时,你可能会首先考虑到 Cookie,这些 Cookie 在每次浏览器请求时都会附带上.而 HTML5 更有效的方法就是本地存储 -- Web Storage.有两个 Web Storage 对象分别是:sessionStorage 和 localStorage ,这些存储的数据是不会通过 HTTP 请求来传输的,因此不会对请求的时间参数任何影响,下面是一小段示例代码:// check to

HTML5 Web存储(Web Storage)(2)

Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB.Web Storage又分为两种: sessionStorage     localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将

HTML5 Web 存储

localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage - 没有时间限制的数据存储 localStorage 对象 localStorage 对象存储的数据没有时间限制.第二天.第二周或下一年之后,数据依然可用. sessionStorage - 针对一个 session 的数据存储 sessionStorage 方法针对一个 session 进行数据存储.当用户关闭浏览器窗口后,数据会被删除. 如何创建并访问一个 sessionSto

使用HTML5 Web存储的localStorage和sessionStorage方式

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStora

HTML5 Web存储(Web Storage)(5)

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的网站,数据存储于不

HTML5 web存储之LocalStorage和sessionStorage

什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大小限制在4k左右,不适合存业务数据 ② cookie每次随HTTP事务一起发送,浪费带宽 localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,但也不是没有问题: ① localstorage大小限制在500万字符左右,各个浏览器不一致 ②