描述

Web Storage是HTML5中新增的除Canvas元素以外，非常非常重要的功能！没有之一！顾名思义，其就是在Web端存储数据的功能，当然这里的存储只是针对客户端本地而言的。

localstorage，sessionstorage，cookie

相同点：都是保存在浏览器端的且同源的
不同点：

cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。存放数据大小4k左右。cookie数据还有path的概念，可以限制cookie只属于某个路径下。同时每次http请求都会携带cookie，所以cookie只适合保存很小的数据。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M甚至更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可以持久保存。

localStorage：始终有效，窗口或浏览器关闭也一直保存，用作持久数据

cookie只在设置的cookie过期时间之前有效，即窗口和浏览器关闭。

作用域不同， sessionStorage不在不同的浏览器窗口共享，即使在同一个页面

localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

localStorage与sessionStorage

localStorage与sessionStorage是Web Storage提供的两种存储在客户端的方法。
localStorage：没有时间限制的存储方式。关闭浏览器数据不会随着消失，当再次打开浏览器时，数据依然可以访问！也就是说除非你主动删除数据，否则数据是永远不会过期的
sessionStorage：保存在session对象当中。用来保存的时间为用户与浏览器的会话时间。即从浏览页面到关闭浏览器为一个会话时间。关闭浏览器，所有的 session数据也会消失！
localStorage是永久保存数据，sessionStorage是暂时保存数据

应用场景：

cookie：
（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除 cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：敏感账号一次性登录

sessionStorage设置和获取数据

//保存数据有3种方法：
sessionStorage.setItem("key","value");
//或
sessionStorage.key="value";
//或
sessionStorage["key"]="value";//读取数据的3种方法，将数据赋值给变量v
var v=sessionStorage.getItem("key");
//或
var v=sessionStorage.key;
//或
var v=sessionStorage["key"];

localStorage设置和获取数据

//保存数据有3种方法：
localStorage.setItem("key","value");
//或
localStorage.key="value";
//或
localStorage["key"]="value";//读取数据的3种方法，将数据赋值给变量v
var v=localStorage.getItem("key");
//或
var v=localStorage.key;
//或
var v=localStorage["key"];

注意：Web Storage是window对象的子对象。

//保存数据userName值为zhangpeiyue
sessionStorage.set("userName","zhangpeiyue");
//也可以写为：
window.sessionStorage.set("userName","zhangpeiyue");

localStorage.length或sessionStorage.length为相应的数据条数

//添加2条localStorage,1条sessionStorage
localStorage.a=1;
localStorage.b=2;
sessionStorage.a=3;
console.log(localStorage.length);//2
console.log(sessionStorage.length);//1

localStorage.key(index)：将数据的索引值作为参数传入，可以得到localStorage中与这个索引号相对应的数据。sessionStorage.key(index)同理！故省略！

 localStorage.userName="zhangpeiyue";localStorage.age=18;console.log(localStorage.key(0));//ageconsole.log(localStorage[localStorage.key(0)]);//18console.log(localStorage.key(1));//userNameconsole.log(localStorage[localStorage.key(1)]);//zhangpeiyue

localStorage.removeItem(“key”):清除指定的localStorage数据。 sessionStorage.removeItem(“key”):清除指定的localStorage数据。localStorage.userName="zhangpeiyue";localStorage.age=18;//移除key为userName的数据localStorage.removeItem("userName");console.log(localStorage.userName);//undefinedconsole.log(localStorage.age);//18

localStorage.clear()：清除所有保存在localStorage的数据。sessionStorage.clear():清除所有保存在sessionStorage的数据。localStorage.userName="zhangpeiyue";localStorage.age=18;console.log(localStorage.userName);//zhangpeiyueconsole.log(localStorage.age);//18localStorage.clear();//清除所有localStorage的数据console.log(localStorage.userName);//undefinedconsole.log(localStorage.age);//undefined

localstorage，sessionstorage，cookie相关推荐

浅谈localStorage、sessionStorage 与cookie
由于工作的需要,今天使用了下localStorage.sessionStorage和cookie,感觉这玩意儿还挺好用的. 关于localStorage与sessionStorage的知识点以及用法之 ...
Localstorage、sessionStorage、cookie 的区别
一.Localstorage.sessionStorage.cookie 的区别是什么? 共同点:都是保存在浏览器端的,且同源的. 区别: 1.cookie数据始终携带在同源的http请求中,即coo ...
Cookie，sessionstorage，localstorage，Token ，JWT，session的区别
1.cookie HTML4开始使用,存储在客户端保存数据,不可跨域.cookie的数据每次都会发给服务器端. 不设置有效期就是存储在内存,会话级别的存储:设置了有效期就是存储在硬盘里,有效期到了自动 ...
各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别
cookie 存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销:但如果这些数据是每个请求都需 ...
JavaScript本地储存：localStorage、sessionStorage、cookie
javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 1. sessionStorage sessionStorage仅在当前会话下 ...
localStorage、sessionStorage、Cookie的区别及用法
localStorage html5新增的一个本地存储API,所谓localStorage就是一个小仓库的意思,它有5M的大小空间,存储在浏览器中. localStorage生命周期是永久,这意味着除 ...
Cookie，Session，Token
一.HTTP协议是无状态的何为无状态:服务器不会记录用户的浏览记录,每次请求都是一个新的HTTP协议,就是请求加响应.不用记录谁刚刚发了HTTP请求, 每次请求都是全新的. 二.管理会话随着网络的 ...
html5 localstorage 生命周期,cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式...
写在前面: 前端开发的供个到效近一项消果近一项消果近一项消果近时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstor ...
Web数据存储之localStorage和sessionStorage
Web数据存储之localStorage和sessionStorage 学习前端以来,自己了解有localStorage和sessionStorage的相关存储的知识,也有实践过,但是之前只限于能用的 ...
常见的前端考试面试题目【vue，react，css，six】
常见的vue,javascript,css前端面试题 1.Vue2和Vue3的区别至少说5点 2.Vue3中组件通信的流程[父传子,子传父] 3.Apply/call/bind的原理是什么? 4.说说 ...

localstorage，sessionstorage，cookie

storage

描述

localstorage，sessionstorage，cookie

localStorage与sessionStorage

应用场景：

sessionStorage设置和获取数据

localStorage设置和获取数据

localstorage，sessionstorage，cookie相关推荐

最新文章

热门文章