[JavaScript] Cookie,localStorage,sessionStorage概述
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 值中禁止使用这些值)
浏览器个数限制
- IE6 或更低版本最多 20 个 cookie
- IE7 和之后的版本最后可以有 50 个 cookie。
- Firefox 最多 50 个 cookie
- chrome 和 Safari 没有做硬性限制
Cookie 的缺点
Cookie
数量和长度的限制。每个 domain 最多只能有 20 条 cookie,每个 cookie 长度不能超过 4KB,否则会被截掉。- 安全性问题。如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密也与事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到目的了。
- 有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。
Cookie 的安全问题
路径限制并不能阻止从其他路径访问 cookie. 使用简单的 DOM 即可轻易地绕过限制(比如创建一个指向限制路径的, 隐藏的 iframe, 然后访问其 contentDocument.cookie 属性). 保护 cookie 不被非法访问的唯一方法是将它放在另一个域名/子域名之下, 利用同源策略保护其不被读取. Web 应用程序通常使用 cookies 来标识用户身份及他们的登录会话. 因此通过窃听这些 cookie, 就可以劫持已登录用户的会话. 窃听的 cookie 的常见方法包括社会工程和 XSS 攻击.
解决安全问题的建议
- 通过良好的编程,控制保存在 cookie 中的 session 对象的大小。
- 通过加密和安全传输技术(SSL),减少 cookie 被破解的可能性。
- 只在 cookie 中存放不敏感数据,即使被盗也不会有重大损失。
- 控制 cookie 的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的 cookie。
localStorage 和 sessionStorage
- 返回值是一个 Storage 对象,可以添加、修改或删除存储的数据项
- 只在本地存储,localStorage 和 sessionStorage 的数据不会跟随 HTTP 请求一起发送到服务器,cookie 会发送
- 数据存储在 localStorage,它们都特定于页面的协议
- localStorage 和 sessionStorage 中的键值对总是以字符串的形式存储。 (键值对总是以字符串的形式存储,数值类型会自动转化为字符串类型)
- localStorage 和 sessionStorage 不能被爬虫抓取到
- 不同浏览器无法共享 localStorage 或 sessionStorage 中的信息
- 相同浏览器的不同页面间可以共享相同的 localStorage(同源策略),但是不同页面或标签页间无法共享 sessionStorage 的信息(多个 iframe 算是同源页面)
- 各浏览器支持的 localStorage 和 sessionStorage 容量上限不同,最低目前在 1m 以上support-test
localStorage 和 sessionStorage 不同
- localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage,sessionStorage 属性允许你访问一个 session Storage 对象
- 存储在 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概述的更多相关文章
- Cookie localStorage sessionStorage
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...
- cookie, localStorage, sessionStorage区别
cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...
- 封装cookie localStorage sessionStorage
var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options ...
- H5新特性 本地存储---cookie localStorage sessionStorage
本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...
- 本地存储cookie,localStorage,sessionStorage
常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...
- Cookie, LocalStorage 与 SessionStorage
Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点 同属于html5 ...
- js中cookie,localStorage(sessionStorage)的存取
一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...
- 详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...
随机推荐
- 权限系统与RBAC模型概述[绝对经典]
0. 前言 一年前,我负责的一个项目中需要权限管理.当时凭着自己的逻辑设计出了一套权限管理模型,基本原理与RBAC非常相似,只是过于简陋.当时google了一些权限管理的资料,从中了解到早就有了RBA ...
- Filter、Interceptor、Aspect 区别及实现
Fliter 过滤器 请求在到达Controller之前进行与返回去之后 调用 入参为 reuqest,response,chian,过滤器获取不了具体调用哪一个类,哪一个方法. 实现: 1.继承 F ...
- Android开发:文本控件详解——EditText(一)基本属性
一.简单实例: EditText输入的文字样式部分的属性,基本都是和TextView中的属性一样. 除此之外,EditText还有自己独有的属性. 二.基本属性: hint 输入框显示的提示文本 ...
- javascript正则表达式学习(二)--位置匹配
文章首发于sau交流学习社区 一.前言 正则表达式是匹配模式,要么是匹配字符,要么匹配位置. 其实在开发中很少用到匹配位置,本篇文章主要包含: 二.什么是位置 位置:相邻字符之间的位置. 三.如何匹配 ...
- Java代码规范与质量检测插件SonarLint
1. SonarLint SonarLint是一个代码质量检测插件,可以帮助我们检测出代码中的坏味道 下载与安装 在需要检测的单个文件或者单个项目上右键 --> Analyze --> ...
- 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
- My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间
在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...
- JDK和Tomcat安装和配置过程
Jdk: 第一步:在下载JDK 第二步:安装 更改安装路径 *JDK配置: JAVA_HOME 环境变量 D:\jdk1.7.0 CLASSPATH 环境变量 .,%JAVA_HOME%\lib ...
- iOS----------上传遇到的问题
插叙:之前电脑一直遇到VPN登录不了的问题,试了几台电脑都能正常连接,只有我的电脑不可以,VPN大佬建议我直接重装系统,索性就直接重新装了系统,结果就能连接了.昨天开始上传包的时候,发现用Applic ...
- python3 完全理解赋值,浅copy,深copy 通过地址详细理解~
额...老规矩,先来一天NLP再说,也没几条了. 十,在任何一个系统里,最灵活的部分是最能影响大局的部分 灵活便是有一个以上的选择,选择便是能力,因此最灵活的人便是最有能力的人. 灵活来自减少只相信自 ...