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 ...
随机推荐
- 杭电1019 Least Common Multiple【求最小公倍数】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1019 解题思路:lcm(a,b)=a*b/gcd(a,b) 反思:最开始提交的时候WA,以为是溢出了, ...
- JS面向对象(1)——构造函数模式和原型模式
1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...
- js页面传值,cookie
// 获取页面穿值 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...
- javaScript 计算两个日期的天数相差
一:计算两个日期相差的天数 1 <html> <head> <meta http-equiv="Content-Type" content=" ...
- jquery里面的一些方法
Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函 ...
- Java范式1
package Xwxx; public class Person { private String name; private int age; public Person() { } public ...
- 前端开发—jQuery
jquery简介 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- 【2018集训队互测】【XSY3372】取石子
题目来源:2018集训队互测 Round17 T2 题意: 题解: 显然我是不可能想出来的……但是觉得这题题解太神了就来搬(chao)一下……Orzpyz! 显然不会无解…… 为了方便计算石子个数,在 ...
- ASP 读取Word文档内容简单示例_组件开发_新兴网络_20161014161610.jpg
- Asp 6种页面转向方法
asp.net 页面转向方法其实就是两种 服务器端转向和客户端转向 客户端转向实质上是指由浏览器直接向服务器端重新发送一个请求. 而服务器端转向是指服务器内部进行页面的跳转. 服务器端转向和客户端转向 ...