Cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。Cookie 的作用就是存储 web 页面的用户信息

javascript 中使用 document.cookie 属性进行 cookie 的创建/读取/删除

//读取
allCookies = document.cookie;
//写入
document.cookie = newCookie;
//删除,设置 expires 参数为过期时间
document.cookie="hello=world; expires=Thu, 18 Dec 2043 12:00:00 GMT;"

Cookie 的属性值

  • ;path=path (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。
  • ;domain=domain (例如 'example.com', 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。与早期规范相反的是,在域名前面加 . 符将会被忽视,因为浏览器也许会拒绝设置这样的 cookie。如果指定了一个域,那么子域也包含在内。
  • ;max-age=max-age-in-seconds (例如一年为 606024*365)
  • ;expires=date-in-GMTString-format 如果没有定义,cookie 会在对话结束时过期

    这个值的格式参见 Date.toUTCString()
  • ;secure (cookie 只通过 https 协议传输)

cookie 的值字符串可以用 encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie 值中禁止使用这些值)

浏览器个数限制

  1. IE6 或更低版本最多 20 个 cookie
  2. IE7 和之后的版本最后可以有 50 个 cookie。
  3. Firefox 最多 50 个 cookie
  4. chrome 和 Safari 没有做硬性限制

Cookie 的缺点

  1. Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie,每个 cookie 长度不能超过 4KB,否则会被截掉。
  2. 安全性问题。如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密也与事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到目的了。
  3. 有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

Cookie 的安全问题

路径限制并不能阻止从其他路径访问 cookie. 使用简单的 DOM 即可轻易地绕过限制(比如创建一个指向限制路径的, 隐藏的 iframe, 然后访问其 contentDocument.cookie 属性). 保护 cookie 不被非法访问的唯一方法是将它放在另一个域名/子域名之下, 利用同源策略保护其不被读取. Web 应用程序通常使用 cookies 来标识用户身份及他们的登录会话. 因此通过窃听这些 cookie, 就可以劫持已登录用户的会话. 窃听的 cookie 的常见方法包括社会工程和 XSS 攻击.

解决安全问题的建议

  1. 通过良好的编程,控制保存在 cookie 中的 session 对象的大小。
  2. 通过加密和安全传输技术(SSL),减少 cookie 被破解的可能性。
  3. 只在 cookie 中存放不敏感数据,即使被盗也不会有重大损失。
  4. 控制 cookie 的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的 cookie。

localStorage 和 sessionStorage

  1. 返回值是一个 Storage 对象,可以添加、修改或删除存储的数据项
  2. 只在本地存储,localStorage 和 sessionStorage 的数据不会跟随 HTTP 请求一起发送到服务器,cookie 会发送
  3. 数据存储在 localStorage,它们都特定于页面的协议
  4. localStorage 和 sessionStorage 中的键值对总是以字符串的形式存储。 (键值对总是以字符串的形式存储,数值类型会自动转化为字符串类型)
  5. localStorage 和 sessionStorage 不能被爬虫抓取到
  6. 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息
  7. 相同浏览器的不同页面间可以共享相同的 localStorage(同源策略),但是不同页面或标签页间无法共享 sessionStorage 的信息(多个 iframe 算是同源页面)
  8. 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同,最低目前在 1m 以上support-test

localStorage 和 sessionStorage 不同

  1. localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage,sessionStorage 属性允许你访问一个 session Storage 对象
  2. 存储在 sessionStorage 里面的数据在页面会话结束时会被清除(页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话),也就关闭浏览器会清除.localStorage 存储的数据能在跨浏览器会话保留,存储在 localStorage 的数据可以长期保留

localStorage 和 sessionStorage 方法

  • key() 该方法接受一个数值 n 作为参数,并返回存储中的第 n 个键名(Storage 的方法)
  • setItem(key,data) 该方法接受一个键名作为参数,返回键名对应的值
  • getItem(key) 该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值
  • removeItem(key) 该方法接受一个键名作为参数,并把该键名从存储中删除
  • clear() 调用该方法会清空存储中的所有键名

sessionStorage 的使用(localStorage 差不多)

function initSession() {
sessionStorage.clear();
} function getSession(name) {
if (sessionStorage.getItem(name)) {
return JSON.parse(sessionStorage.getItem(name));
}
} function setSession(name, data) {
var store = sessionStorage.getItem(name);
if (store) {
console.warn(name + "=>数据在sessionStorage已存在,执行替换操作");
sessionStorage.removeItem(name);
}
sessionStorage.setItem(name, JSON.stringify(data));
} //sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
export { initSession, getSession, setSession };

Docs

MDN - document.cookie

MDN - localStorage

MDN - sessionStorage

MDN - Storage

Cookies and Security

JavaScript Cookie

[JavaScript] Cookie,localStorage,sessionStorage概述的更多相关文章

  1. Cookie localStorage sessionStorage

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

  2. 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?

    本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...

  3. cookie, localStorage, sessionStorage区别

    cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...

  4. 封装cookie localStorage sessionStorage

    var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options ...

  5. H5新特性 本地存储---cookie localStorage sessionStorage

    本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...

  6. 本地存储cookie,localStorage,sessionStorage

    常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...

  7. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  8. js中cookie,localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

  9. 详说 Cookie, LocalStorage 与 SessionStorage

    本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...

随机推荐

  1. 权限系统与RBAC模型概述[绝对经典]

    0. 前言 一年前,我负责的一个项目中需要权限管理.当时凭着自己的逻辑设计出了一套权限管理模型,基本原理与RBAC非常相似,只是过于简陋.当时google了一些权限管理的资料,从中了解到早就有了RBA ...

  2. Filter、Interceptor、Aspect 区别及实现

    Fliter 过滤器 请求在到达Controller之前进行与返回去之后 调用 入参为 reuqest,response,chian,过滤器获取不了具体调用哪一个类,哪一个方法. 实现: 1.继承 F ...

  3. Android开发:文本控件详解——EditText(一)基本属性

    一.简单实例: EditText输入的文字样式部分的属性,基本都是和TextView中的属性一样. 除此之外,EditText还有自己独有的属性. 二.基本属性: hint  输入框显示的提示文本  ...

  4. javascript正则表达式学习(二)--位置匹配

    文章首发于sau交流学习社区 一.前言 正则表达式是匹配模式,要么是匹配字符,要么匹配位置. 其实在开发中很少用到匹配位置,本篇文章主要包含: 二.什么是位置 位置:相邻字符之间的位置. 三.如何匹配 ...

  5. Java代码规范与质量检测插件SonarLint

    1.  SonarLint SonarLint是一个代码质量检测插件,可以帮助我们检测出代码中的坏味道 下载与安装 在需要检测的单个文件或者单个项目上右键 --> Analyze --> ...

  6. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  7. My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间

    在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...

  8. JDK和Tomcat安装和配置过程

    Jdk: 第一步:在下载JDK 第二步:安装 更改安装路径 *JDK配置: JAVA_HOME 环境变量  D:\jdk1.7.0 CLASSPATH 环境变量   .,%JAVA_HOME%\lib ...

  9. iOS----------上传遇到的问题

    插叙:之前电脑一直遇到VPN登录不了的问题,试了几台电脑都能正常连接,只有我的电脑不可以,VPN大佬建议我直接重装系统,索性就直接重新装了系统,结果就能连接了.昨天开始上传包的时候,发现用Applic ...

  10. python3 完全理解赋值,浅copy,深copy 通过地址详细理解~

    额...老规矩,先来一天NLP再说,也没几条了. 十,在任何一个系统里,最灵活的部分是最能影响大局的部分 灵活便是有一个以上的选择,选择便是能力,因此最灵活的人便是最有能力的人. 灵活来自减少只相信自 ...