一、localStorage
浏览器的本地存储(永久存储
), 打开浏览器存储上之后, 关闭浏览器, 信息还在 语法:window.localStorage.setItem(key, value)
注意: value的值必须为字符串
key的书写符合见名知意
window. localStorage. setItem ( 'ceshi1' , '1111111' ) ; window. localStorage. setItem ( 'ceshi2' , '2222222' ) ; window. localStorage. setItem ( 'ceshi3' , '3333333' ) ; window. localStorage. setItem ( 'ceshi4' , '4444444' ) ; window. localStorage. setItem ( 'ceshi5' , '5555555' ) ;
1、删除语法
语法:window.localStorage.removeItem(key);
window. localStorage. removeItem ( 'ceshi1' ) ;
2、清除语法
语法:window.localStorage.clear();
window. localStorage. clear ( ) ;
3、获取语法
语法:window.localStorage.getItem(key)
console. log ( window. localStorage. getItem ( 'ceshi3' ) ) ;
二、sessionStorage
1、设置语法
语法:window.sessionStorage.setItem(key, value)
value的值必须为字符串
window. sessionStorage. setItem ( 'VX' , '666@@@' ) ;
2、获取语法
console. log ( window. sessionStorage. getItem ( 'VX' ) ) ;
3、删除语法
window. sessionStorage. removeItem ( 'VX' ) ;
4、清除语法
window. sessionStorage. clear ( ) ;
5、JSON的两个方法
JSON.stringify( )
将其他类型的数据, 转为字符串格式
JSON.parse( )
将字符串的数据类型还原
var obj = [ 1 , 2 , 3 , 4 , 5 ] ; window. sessionStorage. setItem ( 'OBJ' , JSON . stringify ( obj) ) ; var newObj = JSON . parse ( window. sessionStorage. getItem ( 'OBJ' ) ) ; console. log ( newObj)
三、cookie
cookie只能在用服务器启动
的页面中正常使用 解决: vscode安装Live Server
插件 语法: document.cookie = 'key=value'
1、设置一条cookie
document. cookie = 'QQ=12345' ;
2、设置多条cookie
document. cookie = 'QQ=123456789' ; document. cookie = 'pwd=987654321' ;
3、设置一条带有过期时间的cookie
/*** 不管你设置的是那个时区的时间, (我们是东八区)** 它都会按照世界标准时间去设置** 如果我们想要设置一个过期时间的话, 需要先往后调整8小时; 然后加上你需要的过期时间*/
var timer = new Date ( ) ; document. cookie = 'VX=123456789;expires=' + timer;
4、案例
需求: 我需要设置一条30秒后过期的cookie
获取当前时间 将当前时间往后调整8小时 把调整后的时间,加上我们设置的过期时间
document. cookie = 'QQ=123456789' ; document. cookie = 'pwd=987654321' ; var timer = new Date ( ) ; timer. setTime ( timer. getTime ( ) - 1000 * 60 * 60 * 8 + 1000 * 30 ) ; document. cookie = 'VX=6666;expires=' + timer; console. log ( document. cookie) ;
四、cookie和storage的区别
1、出现时间
cookie:有JS
的时候就有了 storage:有H5
以后才有的
2、存储大小
cookie:4kb
storage:20MB
3、前后端交互(前端向后端发送请求)
cookie:交互时请求默认携带cookie
storage:交互式请求不会携带
,除非前端人员配置传递
4、前后端操作
cookie:不管前后端语言
都可以操作 storage:只能有前端语言
来操作(JS)
5、过期时间
cookie:默认会话级
,页面关闭,存储消失;可以通过手动配置 storage:不能
通过手动配置
五、localStorage和sessionStorage的区别
Localstorage:永久存储
,除非手动清理 sessionstorage:会话级别
,关闭页面,存储就失效