WebStorage
web Storage 是HTML 5引入的一个重要的功能,在前端开发的过程中会经常用到,它可以在客户端本地存储数据,类似cookie,但其功能却比cookie强大的多。cookie的大小只有4Kb左右(浏览器不同,大小也不同),而web Storage的大小有5MB。其API提供的方法有以下几种:
- setItem(key,value):设置storage中的键值对,存储值
- getItem(key):获取storage中的键值对
- removeItem(key):删除storage中的键值对
- clear():清楚storage中的内容
localStorage和sessionStorage的区别
localstorage通过调用window.localStorage获得,sessionStorage通过window.sessionStorage获得。两种storage存储具有相同的方法,都保存在客户端,不与服务端进行交互。
生命周期不同
- localStorage创建存储数据后,除非手动删除数据,不然都会一直存储在浏览器中
- sessionStorage创建存储数据后,页面刷新、同源打开其他页面,代码跳转能够访问到当前的seesionStorage。如果关闭浏览器,sessionStorage就会消失。实际上我们可以理解成一种会话机制。
应用场景不同
- localStorage主要用于存储适合长期保存的数据,如token,搜索记录等等。
- seesionStorage用于存储用户的敏感信息,只在当前会话中保存。如用户名等等。