html5的web存储与cookie的区别

以下从3个方面进行比较:

1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M

2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影响获取资源的效率,localStorage和sessionStorage只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

3,API易用性:cookie需要封装才能使用,localStorage和sessionStorage简单易用

HTML5 专门为存储而设计提供了两种在客户端存储数据的新方法:localStorage和sessionStorage

  • localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。
  • sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除。

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

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

API简单易用

localStorage.setItem(key,value)

localStorage.getItem(key)

注意:

ios safari隐藏模式(隐私模式)下

localStorage和sessionStroage会报错

建议统一使用try-catch封装

cookie

本身用于客户端和服务端通信但它有本地存储的功能,于是被“借用”

cookie用于存储的缺点

存储量太小,只有4KB

所有http请求都带着,会影响获取资源的效率

API需要封装才能用document.cookie = ...   具体可参考其他链接:https://www.cnblogs.com/kaixin3946/p/6042014.html

原文地址:https://www.cnblogs.com/iceflorence/p/8905446.html

时间: 2024-11-05 18:59:07

html5的web存储与cookie的区别的相关文章

Html5的Web存储和WebSql

HTML5 Web 存储 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 本地存储的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Coo

html5的web存储详解

以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足,而且开放起来也是相当的方便 web存储分两类 sessionStorage 容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止 localStorage 容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除.浏览器也因为存储空间的限制或安全原因删除它

HTML5新增web存储方式

客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ②sessionStorage - 针对一个 session 的数据存储 当浏览器关闭时,sessionStorage就被清空: 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: [Storage的数据存储] 1.Storage可以像普通对象一

【HTML5】Web存储

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

Web Storage和cookie的区别

1)  存储空间不同. a)  Web Storage能提供5MB的存储空间(不同浏览器的提供的空间不同).Cookie仅4KB. b)  Web Storage每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱. 2)  与服务器交互. Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互. Cookie的内容会随着请求一并发送的服务器(带宽浪费). 3)  接口. Web Storage提供更多丰富易用的接口,拥有setItem,getIt

客户端存储之HTML5 web存储

最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别. web存储与cookie的区别以及优势: 1.cookie只适合存储少量文本数据,而web存储可存储大量数据 2.以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地 3.web storage有更加丰富易用的接口,比如setItem().getItem().re

数据存储之Cookie和Web Storage。

Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的. 第一:每个特定的域名下最多生成20个cookie. 1.IE6或更低版本最多20个cookie 2.IE7和之后的版本最后可以有50个cookie. 3.Firefox最多50个cookie 4.chrome和

HTML5 鼠标拖拽以及web存储

html5 拖拽: (function(){}())执行匿名函数,要用括号包括起来: 1:用鼠标事件来做拖拽: 2:在HTML5中加入draggable="true",就可以拖拽但是是分成了两个,这个更有效率: ondragstart:拖拽开始: ondrag:拖拽中 ondragend:拖拽结束: ondragenter:进入投放去: ondragover:投放区移动: ondragleave:离开投放区: ondrop:投放区投放:           ondragover会阻止d

【温故而知新-Javascript】使用Web存储

Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS:还有一种存储规范名为“索引数据库API”(Indexed Database API),它允许保存富格式数据和进行SQL风格的查询. 1.使用本地存储 我们可以通过全局属性 localStorage访问本地存储功能.这个属性会返回一个Storage 对象,下表对其进行了介绍.Storage 对象被用来