欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web前端存储之sessionStorage和localStorage

程序员文章站 2022-06-17 21:26:57
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器的此标签页打开期间存在,包括此标签页的页面 ......

对浏览器来说,使用 web storage 存储键值对比存储 cookie 方式更直观,而且容量更大,它包含两种:localstorage 和 sessionstorage

  1. sessionstorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器的此标签页打开期间存在,包括此标签页的页面重新加载

  2. localstorage(长期存储) :与 sessionstorage 一样,但是浏览器关闭后,数据依然会一直存在

  3. 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()