cookie

localstorage

sessionstorage

数据的生命周期

可以设置失效时间,一般默认为浏览器关闭后

若不被清除,则永久保存

存在于一次会话中,刷新页面数据仍然存在,但关闭页面或浏览器失效

存储数据的大小

大约4k

大约5MB 大约5MB

与服务端通信

每次都会携带在http头中,使用cookie保存过多数据会带来性能问题

客户端存储,不参与服务端通信

客户端存储,不参与服务端通信

易用性

原生的cookie接口不友好,需要程序员自己封装

可以使用原生接口,也可以自己封装,对object和array有更好的支持

可以使用原生接口,也可以自己封装,对object和array有更好的支持

应用场景

用户登录:对于登录过的用户,再次登录时想cookie中插入一段加密过的唯一识别该用户的辨识码,下次只要读取这个值就可以判断该用户是否登录。

曾经用于电商网站用户购物车信息,现在一般用localstorage

HTML5游戏需要本地存储,可以用localstorage

当有比较多的表单信息,为了更好地用户体验,需要分为若干子页面给用户填写,这时用sessionstorage

cookie:

1、不同浏览器存储cookie的位置不同(浏览器差异)

2、按域名存储,不同域名的网站cookie存储的位置不同

3、按名值对存储

documen.cookie 可读可写的属性

设置cookie过期时间,5天之后过期

var date=new Date();
date.setDate(date.getDate()+);
date.toGMTString();
document.cookie='username=lily;expires='+date;
//过期日期date必须是字符串格式时间类型的数据

编码与解码:encodeURI(字符),decodeURI(字符)

document.cookie返回的各名值对以‘; ’隔开,以下函数根据cookie名获取对应值

function getCookie(key){
var arr1=document.cookie.split('; ');
for(var i=0;i<arr1.length;i++){
var arr2=arr1[i].split('=');
if(arr2[0]==key)
return arr2[1];
}

设置cookie

function ssetCookie(key,value,t){//t为过期时间
var date=new Date();
date.setDate(date.getDate()+t);
document.cookie=key+'='+value=';expires='+date.toGMTString();
}

安全性:不要用他们存储敏感数据

XSS:跨站脚本攻击 (crossing site scripting)

cookie、locakstorage、sessionstorage的区别的更多相关文章

  1. 简述cookie ,localStrage,sessionStorage的区别?

    1.cookie: 是一个回话跟踪技术,信息存储在用户硬盘,可以做全局变量. 什么是会话:用户进入网站,开始浏览到结束的这样的一个过程,称为一次会话. 会话跟踪技术:浏览器和服务器之间进行多次请求数据 ...

  2. cookie、session、localStorage、sessionStorage的区别

    cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发 ...

  3. cookie、sessionStorage、localStorage的区别?

    数据存储位置 三者都是存储在游览器本地的 区别在于cookie是服务器端写入的,而sessionStorage.localStorage是由前端写入的 生命周期 cookie的生命周期是由服务器端写入 ...

  4. Cookie、LocalStorage 与 SessionStorage的区别在哪里?

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...

  5. cookie、sessionStorage和localStorage的区别

    cookie.sessionStorage.localStorage 都是用于本地存储的技术:其中 cookie 出现最早,但是存储容量较小,仅有4KB:sessionStorage.localSto ...

  6. Cookie localStorage sessionStorage

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...

  7. Cookie和Session的区别

    前言 HTTP是一种无状态的协议,为了分辨链接是谁发起的,就需要我们自己去解决这个问题.不然有些情况下即使是同一个网站我们每打开一个页面也都要登录一下.而Session和Cookie就是为解决这个问题 ...

  8. cookie 和session 的区别详解

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...

  9. Cookie和Session的区别详解

    本文引用自:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一 ...

随机推荐

  1. Chrome F12调试

    F12 断点 F5 Esc 选择鼠标右击:编辑||hover样式 Sonrces go to file (ctrl+p) 搜搜文件名

  2. B. Heaters Div3

    链接 [http://codeforces.com/contest/1066/problem/B] 分析 具体看代码,贪就完事了 代码 #include<bits/stdc++.h> us ...

  3. 5.2&5.3

    队友吕日荣 http://www.cnblogs.com/Russelling/ 最近队友有点忙,尽管如此,队友还是有很给力的付出,让我们在最后完成了任务. 一开始都不知道这次的任务是要做什么,毫无头 ...

  4. iOS开发CAAnimation详解

    Core Animation,即为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能.Core Anima ...

  5. PAT 甲级 1045 Favorite Color Stripe

    https://pintia.cn/problem-sets/994805342720868352/problems/994805437411475456 Eva is trying to make ...

  6. Apache的Thrift引发的编译思考

    最近偶然看到了Apache的Thrift,感觉有点像Corba架构后的变种(赞一个,Facebook真伟大).WSDL能生成C#和Java的(SOAP标准接口,做WebService都用过).Corb ...

  7. HP 4411s Install Red Hat Enterprise Linux 5.8) Wireless Driver

    pick up from http://blog.163.com/wangkangming2008%40126/blog/static/78277928201131994053617/ # cp iw ...

  8. dotnet core的下载地址 以及sdk和runtime的 version 简单说明

    1. dotnet core 2.1 的下载地址 https://dotnet.microsoft.com/download/dotnet-core/2.1 2. dotnet core 2.2 的下 ...

  9. using 的三种使用方式

    using 关键字有两个主要用途: 作为指令:用于为命名空间创建别名或导入在其他命名空间中定义的类型. 作为语句:用于定义一个范围,在此范围的末尾将释放对象. 此外,使用 using 静态指令可定义一 ...

  10. 关于virtualenv python环境引用 pycharm相关配置的使用讨论

    今天总算决定来搞一波以前从来没有弄清楚的环境问题,也觉得是时候弄明白了. 这里先说关于python的环境引用,再谈到virtualenv最后再谈论我使用的pycharm5.0关于是用python环境的 ...