Web前端存储之sessionStorage和localStorage
程序员文章站
2022-06-17 21:26:57
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器的此标签页打开期间存在,包括此标签页的页面 ......
对浏览器来说,使用 web storage 存储键值对比存储 cookie 方式更直观,而且容量更大,它包含两种:localstorage 和 sessionstorage
-
sessionstorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器的此标签页打开期间存在,包括此标签页的页面重新加载
-
localstorage(长期存储) :与 sessionstorage 一样,但是浏览器关闭后,数据依然会一直存在
- localstorage和sessionstorage的存储数据大小一般都是:5mb
用法说明:sessionstorage 和 localstorage 的用法基本一致,引用类型的值需要转换成 json 进行存储
1. 保存数据到本地
let obj = { name: 'xiaoming', age: 18, birthday: '2000-01-01', } sessionstorage.setitem('userinfo', json.stringify(obj)) localstorage.setitem('userinfo', json.stringify(obj))
注:若第二次存储的key值与第一次存储的key值相同,则会覆盖第一次的值。
2. 从本地读取数据
let obj1 = json.parse(sessionstorage.getitem('userinfo')) let obj2 = json.parse(localstorage.getitem('userinfo'))
3. 从本地删除指定 key 值
sessionstorage.removeitem('userinfo') localstorage.removeitem('userinfo')
4. 清空存储的所有值
sessionstorage.clear() localstorage.clear()
上一篇: sonos音箱如何连接手机 sonos音箱连接手机方法
下一篇: Oracle体系架构和导入导出
推荐阅读
-
本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
-
HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
-
localStorage和sessionStorage在跨页面存储中的区别
-
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
-
Web前端存储之sessionStorage和localStorage
-
html5的web存储 sessionStorage和 localStorage
-
HTML5 Web存储-localStorage、sessionStorage
-
前端面试题之Html和CSS_html/css_WEB-ITnose
-
本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
-
HTMl5的存储方式sessionStorage和localStorage详解