浅谈 cookie, sessionStorage和localStorage

Author : luckyGirl

HTML5刚出来时,把HTML5的特性翻了一遍,日子一久,不用几乎都忘光了, 最近项目中跟后台在讨论数据本地存储的问题,想到了除了cookie还有这个HTML5的新特性 — Web Storage,Web Storage又分为sessionStorage和localStorage。接下来来探探这三种的区别与用法。 一. 三者的优劣势 cookie: 优势:所有浏览器都支持,同源但不同目录下也可共享 劣势:同源的http请求都会携带cookie,即使不需要,增加了流量;个数有限制、存储数据比较小,对于这个限制各浏览器稍有不同,一般是50个,大小在4k以内 Web Storage: 优势:存储大小比起cookie大很多,一般限制是5M-10M;App可以在线或离线情况下使用;没有额外的请求头部数据;API简单易用; 劣势:数据以字符串格式存储,其他类型的对象需要在存储前转义使用时再编译;复杂数据集合存储时间可能很慢;存在浏览器兼容性问题,尤其IE只有IE8+才支持。 但两者还存在着共同的安全性问题,如关键攻击载体的CSRF,XSS,Session Hijacking等,因此一些[Read More]

standard

我真的不会用cookie

Author : lovecicy

说来惭愧,作为一个拥有三年工作经验的前端,我没用过cookie,尽管在许多面试题集中都会有描述cookie和localStorage的区别的题目。印象中的cookie,是个古老的,丑陋的,不安全的WEB 1.0时代的产物,它早就应该被淘汰,所以我从来没觉得我需要花时间在它上面。但是最近项目要做优化,需要用到cookie,这才开始了我的cookie初探。 项目中要做的优化是,当用户登陆以后,记住用户信息,包括用户名,用户等级等信息。这样,在用户登陆后,其他的页面就不需要每次都发送一个请求获取这些信息。 很简单的需求,但是在实现的过程中,还是发现了一些问题,比如cookie串了,cookie只在某些页面有效等,接下来,我将介绍cookie的参数,和cookie的操作方法以及一些坑。没有什么高深的内容,高手请绕道。 一、cookie的参数 cookie是document对象的一个属性,并且行为和普通的JS对象不同,我给它的行为命名是:零存整取。 1. 读取cookie信息 要获取cookie的信息,只有一种方式,通过document.cookie读取所有的cookie,返回的值为所有cook[Read More]

standard

JavaScript 对 cookie的操作

Author : luckyGirl

cookie概述,介绍了cookie的属性优劣势,这一篇以实际代码来展示如何在JavaScript中进行操作,主要操作包括存储,读取,删除,以及测试cookie是否被禁用。 <script type=”text/javascript”> // Cookie 工具类 function Cookie(name){ this.name = name; var allcookies = document.cookie; if(allcookies == “”){ return; } var cookies = allcookies.split(‘;’); var cookie = null; for(var i=0;i<cookies.length;i++){ if(cookies[i].substring(0,name.length+1)==(name+’=’)){ cookie = cookies[i]; break; } } if(cookie == null){ retur[Read More]

standard

cookie 概述

Author : luckyGirl

cookie是Document对象的一个属性,是一种HTTP服务器的机制,从客户端和服务器端都能访,使得JavaScript能够在用户的硬盘上持久地存储数据,而且所有的web浏览器都支持,并允许通过document.cookie属性来脚本化。 cookie是一个字符串属性,可以用来对当前网页的cookie进行读/创建/修改/删除操作,每个cookie都是名/值对,如document.cookie=”usedID=228″,如果需要一次存储多个名/值,可以使用分号加空格隔开(; )。因此在cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格,则需要encodeURICompent()函数进行编码,如果这么做了,在读取cookie值时就需要使用decodeURIComponent()函数。 cookie的四个可选属性: expires/ max-age 指定cookie的生存期。默认情况下,cookie是暂时存在御浏览器的会话期间,当退出浏览器,cookie值也就丢失了,若想延长cookie的存在时间,可以将expires设置为未来的一个时期,[Read More]

standard