cookie、localStorage 和 sessionStorage 的使用以及区别
localStorage 和 sessionStorage 的增删改查:
存储数据:
sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数据
1获取指定键名数据:
let dataSession=sessionStorage.getItem('key');//获取指定键名数据
let dataSession2=sessionStorage.key;//sessionStorage是js对象,也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');
1
2
3获取sessionStorage全部数据:
let dataAll = sessionStorage.valueOf(); //获取全部数据
console.log(dataAll, '获取全部数据');
1
2清空sessionStorage数据:
sessionStorage.clear();//清空
1
localStorage
只要将sessionStorage
替换成localStorage
即可,他们两个的使用方法完全是一样的。
#cookie 的增删改茶:
保存 cookie 值:
let dataCookie = '110';
document.cookie = 'token' + '=' + dataCookie;
1
2获取指定名称的 cookie 值
let cookieData = getCookie('token');
function getCookie(name) {
// 获取指定名称的cookie值
let arr = document.cookie.match(
new RegExp('(^| )' + name + '=([^;]*)(;|$)')
); // 使用正则匹配 对应cookie,返回数组
if (arr != null) {
console.log(arr);
return unescape(arr[2]);
}
return null;
}
let cookieData = getCookie('token'); // cookie赋值给变量。
1
2
3
4
5
6
7
8
9
10
11
12
13保存 cookie 并且设置过期时间:
setTime('token','cookie的值',10);
function setTime(key,value,expiresDays) {
//存储 cookie 值并且设置 cookie 过期时间
let date=new Date();
date.setTime(date.getTime()+expiresDays*24*3600\*1000);
document.cookie=`${key}=${value}; expires=${date.toGMTString()}`;
console.log(document.cookie,'存储 cookie 值并且设置 cookie 过期时间');
}
1
2
3
4
5
6
7
8删除 cookie:
delCookie('token');
function delCookie(cookieName1) {
//删除cookie
let date2 = new Date();
date2.setTime(date2.getTime() - 10001); //把时间设置为过去的时间,会自动删除
document.cookie = cookieName1 + '=v; expires=' + date2.toGMTString();
console.log(document.cookie, '删除cookie');
}
1
2
3
4
5
6
7
8
#三者的异同:
这个问题其实很多大厂面试的时候也都会问到,所以可以注意一下这几个之间的区别:
生命周期:
cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效
localStorage:除非被手动清除,否则将会永久保存。
sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除。
存放数据大小:
cookie:4KB左右
localStorage和sessionStorage:可以保存5MB的信息。
http请求:
cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性:
cookie:需要程序员自己封装,源生的Cookie接口不友好
localStorage和sessionStorage:源生接口可以接受,亦可再次封装来对Object和Array有更好的支持
#应用场景:
从安全性来说,因为每次http请求都会携带cookie信息,这样无形中浪费了带宽,所以cookie应该尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用,限制比较多。但是用来识别用户登录来说,cookie还是比stprage更好用的。其他情况下,可以使用storage,就用storage。
storage在存储数据的大小上面秒杀了cookie,现在基本上很少使用cookie了,因为更大总是更好的,哈哈哈你们懂得。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面,一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数,sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数。
#浏览器支持情况:
localStorage和sessionStorage是html5才应用的新特性,可能有些浏览器并不支持,这里要注意。
cookie的浏览器支持没有找到,可以通过下面这段代码来判断所使用的浏览器是否支持cookie:
if(navigator.cookieEnabled) {
alert("你的浏览器支持cookie功能");//提示浏览器支持cookie
} else {
alert("你的浏览器不支持cookie");//提示浏览器不支持cookie }
#数据存放处:
#番外:各浏览器Cookie大小、个数限制。
cookie 使用起来还是需要小心一点,有兴趣的可以看一下这个链接。
.
cookie、localStorage 和 sessionStorage 的使用以及区别的更多相关文章
- Cookie, LocalStorage 与 SessionStorage
Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点 同属于html5 ...
- 区分 Cookie, LocalStorage 与 SessionStorage
基本概念 Cookie Cookie 的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码 ...
- cookie,localStorage和sessionStorage区别
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...
- 详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...
- Cookie, LocalStorage 与 SessionStorage说明
一.Cookie Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你 ...
- localStorage和sessionStorage的共同点和区别
共同点: 1.localStorage和sessionStorage都是用来存储客户端临时信息的对象. 2.他们均只能存储字符串类型的对象. 3.不同浏览器无法共享localStorage或sessi ...
- cookie,localStorage和sessionStorage的区别
cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.
- cookie、session、localStorage、sessionStorage区别
cookie.session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份 ...
- 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
随机推荐
- python金融应用(二)基本数据类型和结构
一.基本数据类型 1.整形 a=10 type(a) Out[75]: int a.bit_length() #字节长度Out[76]: 4 整形相除会返回整形,想要返回浮点数,需要用浮点数相除1./ ...
- 从零开始的openGL——四、纹理贴图与n次B样条曲线
前言 在上篇文章中,介绍了如何加载绘制模型以及鼠标交互的实现,并且遗留了个问题,就是没有模型表面没有纹理,看起来很丑.这篇文章将介绍如何贴纹理,以及曲线的绘制. 纹理贴图 纹理加载 既然是贴图,那首先 ...
- OPPO R11刷机初体验
刷机目的 最初打算是用旧手机搭一个服务器,首先想到的是刷一个Linux系统,但这太难了,我搞不定,然后就想着可以用一些软件比如KSWEB之类的来代替,但是想要访问80端口的话还是需要root,但是普通 ...
- 一遍文章搞清楚VO、DTO、DO、PO的概念、区别
作者:Cat Qi 概念: VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来. DTO(Data Transfer Object):数据传输对 ...
- python学习-pandas
import pandas as pd # DataForm 二维数据# print(pd.read_excel("datas.xlsx")) # 多行数据 - 加载表单s = p ...
- vue.config.js的常用配置
const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__di ...
- 解决在IE11浏览器下,JQuery的AJAX方法不响应问题
在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...
- Sunset: Nightfall Vulnhub Walkthrough
靶机链接: https://www.vulnhub.com/entry/sunset-nightfall,355/ 主机扫描: ╰─ nmap -p- -A 10.10.202.162Starting ...
- Android 数据库 SQLiteOpenHelper
public class DbOpenHelper extends SQLiteOpenHelper { private static String name = "test.db" ...
- Springboot 错误处理机制
SpringBoot默认的错误处理机制 即我们常见的白色的ErrorPage页面 浏览器发送的请求头: 如果是其他的请求方式,比如客户端,则相应一个json数据: 原理:是通过 ErrorMvcAut ...