比较cookies和Web Storage

Web Storage是HTML5中提出的新增特性,顾名思义,即用来在web客户端本地保存数据。在HTML5之前,保存本地数据通常使用的cookies,但是使用cookies存在一些问题。

1.cookies

缺点
- 大小:cookies的大小被限制在4KB,大多数浏览器只允许每个站点保存20个cookies,因此对于存储大量数据显然不适用;
- 带宽:cookies随HTTP事务一起被发送到服务器,需要浪费一部分带宽发送cookies;
- 复杂性:要正确操作cookies比较困难。


优点

  • 被大多数浏览器支持;
  • 对于一些小数据存储很适用,例如用户的登录信息。

cookies用法
cookie由以下几部分组成

  • 一个包含实际信息的键/值对,默认为空;
  • 一个表示有效期的GMT格式的字符串,如果没有设置,当用户关闭浏览器时cookie过期;
  • 一个目录路径,默认设置cookie的页面所在的目录;
  • 一个域,默认为设置cookie的页面所处的域。

设置cookie:

document.cookie = 'testcookie=yes; expires=Tue,23 Jan 2016 13:57:39 UTC; path=/; domain=quirksmode.org';
document.cookie = 'testcookie2=no; expires=Tue, 23 Jan 2016 13:57:39 UTC; path=/; domain=quirksmode.org';

读取cookie:
读取document.cookie属性,会得到当前页面所关联的所有cookie的键/值对,所以需要用如下方式读取某个cookie的值:

var searchString = 'testcookie';//需要寻找的cookie的名
var cookieValue = '';
var cookies = document.cookie.split(';');//用分号拆分cookies,并保存在数组中
for(var i=0 ;i < cookies.length ; i++){
    if(cookies[i].indexOf(searchString+'=') == 0){
        cookieValue = cookies[i].subString(cookies[i].indexOf('=')+1);
        break;
    }
}

删除cookie:
只需要设置cookie的有效期为已经过去的时间即可。

此外,http://www.quirksmode.org/js/cookies.html提供了3个封装好的函数createCookie(),readCookie()和eraseCookie(),用来操作cookie,可以借鉴。

2.Web Storage

Web Storage分为两种,分别是sessionStorage和localStorage。
优点:
- 可以存储大容量数据,一般为5MB
- 只在客户端保存,不参与服务器通信,不占用带宽资源
- 原生接口可以接受,也可以在此封装
缺点:
- 一些老的浏览器不支持

Web Storage用法:
(1) sessionStorage,将数据保存在session对象中,当用户关闭浏览器时,数据会被删除。
设置:3种方式

 sessionStorage.setItem('keyname1',value);
 sessionStorage.keyname2 = value;
 sessionStorage['keyname3'] = value;

读取:

var value1 = sessionStorage.getItem('keyname1');
var value2 = sessionStorage.keyname2;
var value3 = sessionStorage['keyname3'];

删除:

sessionStorage.removeItem('keyname1');//清除一个键值对
sessionStorage.clear();//清除sessionStorage所有键值对

(2)localStorage,存储的数据没有时间限制,除非删除,否则永久保存。它将数据保存在客户端本地的硬件设备(通常指硬盘)中,及时浏览器被关闭了,该数据依旧存在,下次打开浏览器(但必须是相同的浏览器)访问站点时仍然可以继续使用。
设置:3种方式

 localStorage.setItem('keyname1',value);
 localStorage.keyname2 = value;
 localStorage['keyname3'] = value;

读取:

var value1 = localStorage.getItem('keyname1');
var value2 = localStorage.keyname2;
var value3 = localStorage['keyname3'];

删除:

localStorage.removeItem('keyname1');//清除一个键值对
localStorage.clear();//清除localStorage所有键值对
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值