在客户端存储数据可以使用的技术有如下四种:

  1. Cookie技术:浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好

  2. H5 WebStorage:不能超过8MB,操作简单;

  3. IndexedDB:可存大量数据,还不是标准技术;

  4. Flash存储:依赖于Flash播放器,Adobe已宣布将放弃Flash,可以不再考虑此技术。

这里主要讨论cookie和WebStorage:

共同之处:Cookie和WebStorage都是用来跟踪浏览器用户身份的会话方式。

名词解释:Session:会话,浏览器从打开某个网站的一个页面开始,中间可能打开很多页面,直到关闭浏览器,整个过程称为“浏览器与Web服务器的一次会话。

 Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

WebStorage技术中,浏览器为用户提供了两个对象:

(1)window.sessionStorage:类数组对象,会话级数据存储;

(2)window.localStorage:类数组对象,本地存储(跨会话级存储);

sessionStorage,是在浏览器进程所分得的内存中存储着一次Web会话可用的数据,可供此次会话中所有的页面共同使用;浏览器一旦关闭就消失了。作用:在同一个会话中的所有页面间共享数据。

localStorage是在浏览器所能管理的外存(硬盘)中存储着用户的浏览数据,可供此次会话以及后续的会话中的页面共同使用,即使浏览器关闭也不会消失,可以说在本地电脑永久存在,除非JavaScript脚步删除或者用户主动清空浏览器缓存。作用:在当前客户端所对应的所有会话中共享数据,如登录用户名。

sessionStorage有如下方法,localStorage同样也可使用这些方法:

sessionStorage[key] = value       //保存一个数据

sessionStorage.setItem(key, value) //保存一个数据

var v = sessionStorage[key]       //读取一个数据

var v = sessionStorage.getItem(key) //读取一个数据

sessionStorage.removeItem(key) //删除一个数据

sessionStorage.clear()    //清除所有数据

sessionStorage.length    //数据的数量

sessionStorage.key(i)    //获取第i个key

localStorage中若数据发生了修改,都会触发一次window.onstorage事件,可以监听此事件,实现监视localStorage数据改变的目的,用于在一个窗口中监视其它窗口中对localStorage数据的修改。但注意window.onstorage不能监视sessionStorage数据的修改!

应用场景

有了对上面这些差别的直观理解,我们就可以讨论三者的应用场景了。

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了。

而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

安全性的考虑

需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

参考资料:

<<JavaScript高级程序设计>>

详说 Cookie, LocalStorage 与 SessionStorage(https://segmentfault.com/a/1190000002723469)

浅谈cookie,sessionStorage和localStorage区别的更多相关文章

  1. 浅谈cookie 和session 的区别

    具体来说 cookie 是保存在“客户端”的,而session是保存在“服务端”的 cookie 是通过扩展http协议实现的 cookie 主要包括 :名字,值,过期时间,路径和域: 如果cooki ...

  2. 浅谈cookie与session的区别

    cookie用的是在客户端保持状态的方案(它是在用户端的会话状态的存贮机制),前端也可以来设置他 所有浏览器都识别,并且会缓存在浏览器中. cookie是以key=value这种键值对的形式保存,每个 ...

  3. 浅谈 unix, linux, ios, android 区别和联系

    浅谈 unix, linux, ios, android 区别和联系 网上的答案并不是很好,便从网上整理的相对专业的问答,本人很菜,大佬勿喷 UNIX 和 Linux   UNIX 操作系统(尤尼斯) ...

  4. cookie,sessionstorage,localstorage区别

    都是保存在浏览器端,且同源的,区别如下: 1.携带 cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递. 而sessionStorage和local ...

  5. cookie、sessionStorage、localStorage区别

    相同:不管sessionStorage localStorage 还是 cookie 都是存储用户数据的. 不同: 1.cookie的存储空间小, cookie的数据是会通过http请求带到服务器的( ...

  6. cookie、session、sessionStorage 、localStorage 区别

    1> cookie在浏览器与服务器之间来回传递,在想服务器发送请求时,web浏览器会自动携带cookie. sessionStorage和localStorage不会把数据发给服务器,仅在本地保 ...

  7. (进阶篇)浅谈COOKIE和SESSION关系和区别

    COOKIE介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 coo ...

  8. cookies,sessionStorage 和 localStorage区别

    cookies,sessionStorage 和 localStorage 的区别 cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). cook ...

  9. 浅谈Log4j和Log4j2的区别

    相信很多程序猿朋友对log4j都很熟悉,log4j可以说是陪伴了绝大多数的朋友开启的编程.我不知道log4j之前是用什么,至少在我的生涯中,是log4j带我开启的日志时代. log4j是Apache的 ...

  10. 浅谈cookie和session

    Cookie简介 Cookie(复数形态Cookies),中文名称为“小型文本文件”,指某些网站为了辨别用户身份或存储用户相关信息而存储在用户本地终端(Client Side) 上的数据(通常为加密数 ...

随机推荐

  1. ansys中的.full文件中如何看刚度矩阵和质量矩阵(转)

    http://fffff-2001.blog.163.com/blog/static/15507529200722492917460 Q:请问ansys中的.full文件中如何看刚度矩阵和质量矩阵? ...

  2. linux crontab创建计划任务

    1.编辑计划任务 编辑crontab文件 crontab -e 2.查看计划任务日志 查看crontab日志 tail -100f /var/log/cron 3.创建计划任务格式 (1)基本格式 : ...

  3. Java IO(二)--RandomAccessFile基本使用

    RandomAccessFile: 翻译过来就是任意修改文件,可以从文件的任意位置进行修改,迅雷的下载就是通过多个线程同时读取下载文件.例如,把一个文件分为四 部分,四个线程同时下载,最后进行内容拼接 ...

  4. count() 方法

    count() :方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置. num1,num2 = input('请输入字符串:'),input('请输入要查询的子串:') p ...

  5. bash基础——管道符、通配符

    1.多命令顺序执行 多命令顺序执行 格式 作用 ; 命令1 ; 命令2 多个命令之间没有任何逻辑联系 && 命令1&&命令2 逻辑与 当命令1正确执行,则命令2才会执行 ...

  6. bootstrap不兼容ie8如何解决

    说起bootstrap大家一定都不陌生,可以说是目前最受欢迎的前端框架,简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 但是在实际运用中也会遇到各种各样的问题,比如最近项目中 ...

  7. 笔试算法题(43):布隆过滤器(Bloom Filter)

    议题:布隆过滤器(Bloom Filter) 分析: BF由一个很长的二进制向量和一系列随机映射的函数组成,通过多个Hash函数将一个元素映射到一个Bit Array中的多个点,查询的时候仅当所有的映 ...

  8. VSCODE插件开发:用户输入输出

    阅读这篇文章之前,假设你已经具有开发helloworld的插件的能力. vscode.window 简介 vscode.window 负责当前激活窗口的输入输出,比如展示信息,和用户输入等功能都是用v ...

  9. (蓝桥杯)2018JAVA B组 日志分析

    日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞". ...

  10. 记一次C++编程引用obj文件作为静态库文件

    简介 常用静态库文件的名字一般是 ***.lib ,例如 nisyscfg.lib 就是一个静态库文件,但是一个例程居然是引用 **.obj 文件作为静态库,有点非常规啊. 这是一个NI488.2 的 ...