JS cookie与web存储（localStorage与sessionStorage）

cookie

<script>document.cookie = 'a=1'console.log(document.cookie) // style=null; a=1
</script>

设置了cookie，请求会携带给服务端。
cookie的构成：
名字name
值value
域domain
路径path
过期时间expires
安全标志secure

设置了cookie后，只要请求的域和路径正确，就会自动携带cookie
框架中也许需要在配置中手动设置withCredentials为true，这里是允许跨域携带cookie
以及服务端设置Access-Control-Allow-Credentials为true

localStorage

<script>localStorage.setItem('a', 1)// 等同于 localStorage.a = 1// 等同于 localStorage['a'] = 1console.log(localStorage.getItem('a')) // 1// 等同于 localStorage.a// 等同于 localStorage['a']typeof localStorage.getItem('a') === string // true
</script>

sessionStorage

<script>sessionStorage.setItem('a', 1)// 等同于 session.a = 1// 等同于 session['a'] = 1console.log(session.getItem('a')) // 1// 等同于 session.a// 等同于 session['a']typeof session.getItem('a') === string // true
</script>

三者的概述

cookie是最开始的存储方式，要想方便使用，就要自己写一个小插件来解析cookie。如果不设置过期时间，cookie在页面关闭时就会删除，并遵循同源策略，别的页面不能访问本页面的cookie。document.cookie = 'a=1'中，不是对cookie的覆盖，而是追加a=1.如果再执行document.cookie = 'b=2'，那输出就是style=null; a=1; b=2
localStorage和sessionStorage都是Storage的实例，是后于cookie出现的网页存储方式，其增删改查的API都相同，唯一的区别就是localStorage是永久存储，sessionStorage会在页面关闭时自动删除。
PS:sessionStorage无法在本地文件使用，必须有和服务端的会话。

cookie小插件

class CookieUtil {static get(name) {let cookieName = `${encodeURIComponent(name)}=`,cookieStart = document.cookie.indexOf(cookieName),cookieValue = null;if (cookieStart > -1) {let cookieEnd = document.cookie.indexOf(';', cookieStart);if (cookieEnd === -1) {cookieEnd = document.cookie.length;}cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length), cookieEnd);}return cookieValue;}static set(name, value, expires, path, domain, secure) {let cookieText = `${encodeURIComponent(name) = encodeURIComponent(value)}`if (expires instanceof Date) {cookieText += `;expires="${expires.toGMTString()}"`}if (path) {cookieText += `;path="${path}"`;}if (domain) {cookieText += `;domain="${domain}"`;}if (secure) {cookieText += `;secure="${secure}"`;}document.cookie = cookieText;}static unset(name, path, domain, secure) {CookieUtil.set(name, "", new Data(0), path, domain, secure);}
}CookieUtil.set('a', 1)
const a = CookieUtil.get('a')
console.log(a); // 1

JS cookie与web存储（localStorage与sessionStorage）相关推荐

Web存储—localStorage存储
Web存储-localStorage存储一. localStorage存储特点:特点:本地存储数据的不需要网络.大小5M .域内安全.永久存储.只要不删除,就一直存在二.语法设置:localS ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
Cookie、session以及localStorage与sessionStorage之间的区别
一.Cookie.session和localStorage的区别 cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cooki ...
H5存储------localStorage和sessionStorage
web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了????) 早期时期 cookie存储 (之前我用着还是很 ...
HTML 5 Web 存储-localStorage
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前, ...
HTML5本地存储localStorage，sessionStorage
HTML5新特性,用于本地存储, localStorage:不删除会一直存在斯基 sessionStorage:浏览器关掉,就跪了 /*** H5:数据存储方式,可以携带用户信息id* * 注意:* ...
浏览器之本地缓存存储 localStorage 和 sessionStorage的区别以及用法
区别: localStorage永久保存在浏览器 :sessionStorage在浏览器关闭之后存储的数据就会销毁用法:两者用法差不多,但是取值有所不同编辑页面逻辑代码为: 这是给 id=btn ...
web前端基础入门开发教程之HTML5 Web 存储
HTML5 Web 存储在HTML5之前,主要是使用cookies存储,cookies的缺点有:需要在请求头上带着数据,存储大小不过,在4k之内.本节, HTML5 web 存储,一个比cookie ...
cookie、localStorage和sessionStorage三者的异同
1.三者都是用来存储浏览器数据的 2.生命周期:cookie可以设置数据失效时间,默认是关闭浏览器后失效:localStorage中的数据是永久保存的,除非手动清除:sessionStorage的数据 ...

JS cookie与web存储（localStorage与sessionStorage）

cookie

localStorage

sessionStorage

三者的概述

cookie小插件

JS cookie与web存储（localStorage与sessionStorage）相关推荐

最新文章

热门文章