localStorage、sessionStorage、cookie、session
localStorage 和 sessionStorage
HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage; 两者都是仅在客户端(即浏览器)中保存,不参与和服务器的通信
- sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 ,关掉浏览器即被清除
- localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在
1. 保存数据到本地
sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON
const info = {
name: 'xiaohua',
age: 20,
id: '01'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));
2. 从本地存储获取数据
var value=sessionStorage.getItem("key");//value即为所存的值
var value=localStorage.getItem("key");//value即为所存的值
3. 本地存储中删除某个保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
4. 删除所有保存的数据
sessionStorage.clear();
localStorage.clear();
5. 监听本地存储的变化
Storage 发生变化(增加、更新、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其他页面改变 Storage
6. 提供了key
方法用于遍历
function showStorage(){
for(var i=0;i<localStorage.length;i++){
//key(i)获得相应的键,再用getItem()方法获得对应的值
console.log(localStorage.key(i),
localStorage.getItem(
localStorage.key(i)));
}
}
一、sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。
区别:
1.存储位置不同:
cookie: 数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;同时还可以限制cookie只属于某个路径下。
sessionStorage、localStorage:不会自动把数据发给服务器,仅在本地保存。
2.存储大小不同:
cookie:只适合保存很小的数据(因为每次http请求都会携带cookie),如会话标识。
sessionStorage和localStorage: 虽然也有存储大小的限制,但比cookie大得多。
3.数据有效期不同:
sessionStorage:仅在当前浏览器窗口关闭前有效;
localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
cookie: 只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
4.作用域不同:
sessionStorage : 不在不同的浏览器窗口中共享,即使是同一个页面;
localStorage: 在所有同源窗口中都是共享的;
cookie: 在所有同源窗口中都是共享的。
二、cookie和session的区别:
1、session保存在服务器,客户端不知道其中的信息;cookie保存在客户端,服务器能够知道其中的信息
2、session中保存的是对象,cookie中保存的是字符串
3、session不能区分路径,同一个用户在访问一个网站期间,所有的session在任何一个地方都可以访问到
而cookie中如果设置了路径参数,那么同一个网站中不同路径下的cookie互相是访问不到的
* sessionStorage 、localStorage 、session、cookie *
简言之:
localStorage: 浏览器端持久化存储, 关闭浏览还存在, 最大5MB(基本没限制了)
sessionStorage: 浏览器端内存存储, 关闭浏览器不存在
session: 服务器端创建, 服务器端保存, 依赖于cookie
cookie: 服务器端创建, 浏览器端保存, 请求携带对应cookie, 长度和数量有限制(4kb)
localStorage、sessionStorage、cookie、session的更多相关文章
- localStorage、sessionStorage和cookie的区别
本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.co ...
- 浅谈localStorage、sessionStorage 与cookie
由于工作的需要,今天使用了下localStorage.sessionStorage和cookie,感觉这玩意儿还挺好用的. 关于localStorage与sessionStorage的知识点以及用法之 ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- 5月16日 python学习总结 DBUtils模块、orm 和 cookie、session、token
一.DBUtils模块 介绍 The DBUtils suite is realized as a Python package containing two subsets of modules, ...
- Cookie的使用、Cookie详解、HTTP cookies 详解、获取cookie的方法、客户端获取Cookie、深入解析cookie
Cookie是指某些网站为了辨别用户身份.进行session跟踪而存储在用户本地终端上的数据(通常经过加密),比如说有些网站需要登录才能访问某个页面,在登录之前,你想抓取某个页面内容是不允许的.那么我 ...
- localStorage , sessionStorage ,cookie 使用介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- localStorage,sessionStorage和cookie的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- 使用localStorage,sessionStorage,cookie等存储
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. 特点: localStor ...
- 6.cookie、session,localStorage、sessionStorage
必须在服务器下运行 cookie/session 存东西 cookie 时间 过期时间 4k 服务器把一部分数据保存在客户端(浏览器) session 回话 时间 服务器存取用户信息 5M local ...
随机推荐
- 【技术累积】【点】【java】【8】maven常用命令(持续更新)
建立 mvn archetype:generate -DgroupId=com.andy.test -DartifactId=test-project -Dversion=0.0.1-SNAPSHOT ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据
http://www.cnblogs.com/wuhuacong/p/3669708.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- 如何快速在命令提示符(cmd)中打开指定的文件夹路径!
按住shift键然后 右击,如图:
- Java中的常量
常量的概念 是指在Java程序中固定不变的数据.我们可以理解为是一种特殊的变量,它的值被设定后,在程序运行过程中不允许改变. 常量的分类 整数常量: 所有的整数 例如 100 -100 123 ...
- xshell登录centos7很慢解决办法
使用xshell登录到centos系统虚拟机,可以登录上去,但是认证速度特别慢. 因为在登录时,需要反向解析dns,因此,修改linux配置文件,vi /etc/ssh/sshd_config,将其注 ...
- POJ 2486 Apple Tree (树形dp 经典题)
#include<cstdio> #include<cstring> #include<algorithm> using namespace std; const ...
- tsar采集数据原理
系统模块 cpu 字段含义 user: 表示CPU执行用户进程的时间,通常期望用户空间CPU越高越好. sys: 表示CPU在内核运行时间,系统CPU占用率高,表明系统某部分存在瓶颈.通常值越低越好. ...
- WEBGL学习【九】立方体贴不同的纹理
<html> <!--开始实现一个三维街景的渲染效果--> <head> <meta http-equiv="Content-Type" ...
- webapi get请求 FromUri list参数传递
今天做项目调用第三方的webapi时,发现get请求竟然用的是FromUri list参数,汗... 这里简单记录下请求传参的方式(但不推荐大家使用get FromUri list参数 来定义weba ...
- Windows使用docker打开新窗口error解决办法
环境 win7 Error: error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.26/containers/json ...