解读cookie,localstorage,sessionstorage用法与区别2(解读cookie)

说到本地存储

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 永久存储(可以手动删除数据)
  • sessionStorage - session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失

其实前景和作用和cookie也是相同甚至从cookie演变而来,用一张图来表示服务商对本地存储的探索。

由图就可以看出本地存储的和cookie的区别,存储大且无插件。

这时也许就该思考H5的最大问题兼容性,这是本地存储支持情况图。

检测:

if(window.localStorage){
 alert(‘This browser supports localStorage‘);
}else{
 alert(‘This browser does NOT support localStorage‘);
}

使用方法:

window.localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

让我们像福尔摩斯一样细细观察发现他们之间的细微差别设置和获取都有三种方式,读者请酌情考虑。点加属性的用的比较多。可以加window也可以不加,因为页面中默认为是window的属性和方法。

总结localstorage和sessionStorage特点

1.没有时间限制

2.容量大

3.无插件

4.可以不像服务器请求直接使用本地存储

5.客户端完成不会请求服务器

6.sessionStorage数据是不共享、 localStorage共享

应用实例1

表单保存         如果做一个交互当填表单填写一半的时候临时走开,需要关闭浏览器,当在打开该网页还想表单为已填写状态。

本地存储事件

window.addEventListener(‘storage‘,function(ev){ //当前页面的事件不会触发
  alert(123);

  console.log( ev.key );
  console.log( ev.newValue );
  console.log( ev.oldValue );
  console.log( ev.storageArea );
  console.log( ev.url );

},false);

只有火狐和safari支持chrome并不支持,可以购物车保存实例。

当数据有修改或删除的情况下,就会触发storage事件

在对数据进行改变的窗口对象上是不会触发的 Key :

修改或删除的key值,如果调用clear(),key为null

newValue : 新设置的值,如果调用removeStorage(),key为null

oldValue : 调用改变前的value值 storageArea : 当前的storage对象

url : 触发该脚本变化的文档的url 注:session同窗口才可以,例子:iframe操作

由于兼容性问题更多实例就不写了 想要了解可以博主联系。

与cookie的区别

1.cookie需要自己封装我们方法本地存储已经自带方法,方便使用

2.cookie客户端服务器端,都会请求服务器(可以再头部信息中观察到)

3.存储量大了

时间: 2024-10-31 08:00:32

解读cookie,localstorage,sessionstorage用法与区别2(解读cookie)的相关文章

解读cookie,localstorage,sessionstorage用法与区别

cookie cookie概念 cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. 为什么提出cookie? 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. 我的理解 cookie为一小段文

cookie,localStorage,sessionStorage的区别

一.概念 Cookie 什么是Cookie —— Cookie 是一些数据, 存储于你电脑上的文本文件中. localStorage 什么是 localStorage —— localStorage 是指将信息数据存储在客户端本地的硬件上,即使浏览器被关闭了,信息数据同样存在 sessionStorage 什么是 sessionStorage —— sessionStorage 是指将信息数据存储在session对象中,所以当浏览器关闭后,sessionStorage也随之清空 二.如何使用(一

cookie,localStorage,sessionStorage的特点与区别。

1.cookie Cookie实际上是一小段的文本信息.客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie.客户端浏览器会把Cookie保存起来.当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器.服务器检查该Cookie,以此来辨认用户状态.服务器还可以根据需要修改Cookie的内容.由于cookie的安全性不高,所以一般不把密码保存在cookie中: 2.localStorage ①相当于一个5M大小的前端数据库

cookie/ localStorage /sessionStorage区别

/** localStorage** *///window.localStorage 获取//window.sessionStorage 获取//document.cookie 获取 // 设置cookie document.cookie = 'aaa= 12';// cookie 大小限制 最多5kb 而且也占用带宽,因为会把cookie中的内容全部发给后台// localStorage 容量较大: 而且不会发给后台,不占用带宽// sessionStorage 再关闭页面时 就会清空 //

封装cookie localStorage sessionStorage

var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof

Cookie, LocalStorage 与 SessionStorage

Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5中的Web Storage 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭浏览器后被清除 存放数据大小 4K/个文件*最多20个 >5MB/站点 >5MB/站点 与

Cookie, LocalStorage 与 SessionStorage说明

 一.Cookie    Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到"记住密码",这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的. HttpCookie cookie = new HttpCookie("MyCookieName", "string value"); Re

cookie localStorage与sessionStorage的使用及区别

cookie是储存在用户本地终端上的数据,意思就是能把用户的一些文字信息储存下来,但是cookie的储存空间特别小,一个浏览器能创建的 Cookie 数量最多为 300 个,并且每个不能超过 4KB,每个 Web 站点能设置的 Cookie 总数不能超过 20 个,因此现在越来越少的人使用cookie了,下面讲解一下cookie的用法吧,在使用cookie的时候我们需要先设置cookie p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px C

浅谈cookie,sessionStorage和localStorage区别

在客户端存储数据可以使用的技术有如下四种: Cookie技术:浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好 H5 WebStorage:不能超过8MB,操作简单: IndexedDB:可存大量数据,还不是标准技术: Flash存储:依赖于Flash播放器,Adobe已宣布将放弃Flash,可以不再考虑此技术. 这里主要讨论cookie和WebStorage: 共同之处:Cookie和WebStorage都是用来跟踪浏览器用户身份的会话方式. 名词解释:Sess