sessionStorage和localStorage的使用

前言

最近在项目中遇到了两个需求,并且都用到了H5的这两种储存方式

1 sessionStorage

需求:我从后台得到一个URL的时候,我根据路由判断用户一进入页面显示出一个蒙层,当用户进入当前页面的其他页面再返回时需要使蒙层消失,这时候我就使用到了sessionStorage以及它的特性 浏览器关闭时自动销毁,成功解决;

2 localStorage

需求:页面有一个客服入口,每次进入客服时都要请求一次用户信息传给客服,这时候用到了localStorage,用户第一次进入客服时将用户信息保存在浏览器中,这样用户每次进入客服时后台都会直接获取到用户信息

HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储)。

区别

sessionStorage 浏览器关闭时自动销毁

localStorage 存储在浏览器中,无期限

sessionStorage与localStorage区别:

sessionStorage用法

// 保存或设置数据到sessionStorage
    sessionStorage.setItem('key','value')

// 获取某个sessionStorage
    sessionStorage.getItem('key')

// 从sessionStorage删除某个保存的数据
    sessionStorage.removeItem('key')

// 从sessionStorage删除所有保存的数据
    sessionStorage.clear();

1.sessionStorage在浏览器关闭后自动销毁;而localStorage无期限,除非主动删除。

localStorage用法

// 保存或设置数据到localStorage
    localStorage.setItem('key','value')

// 获取某个localStorage
    localStorage.getItem('key')

// 从localStorage删除某个保存的数据
    localStorage.removeItem('key')

// 从localStorage删除所有保存的数据
    localStorage.clear();

2.sessionStorage由于上述特性,也就不能够在不同页面之间进行数据共享,同一域名也是不可以的;

localStorage则能够实现该需求,但是仅限于同一域名下;

两者的用法相似:

// 保存或设置数据到sessionStorage
sessionStorage.setItem('key','value')

// 获取某个sessionStorage
sessionStorage.getItem('key')

// 从sessionStorage删除某个保存的数据
sessionStorage.removeItem('key')

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

// 保存或设置数据到localStorage
localStorage.setItem('key','value')

// 获取某个localStorage
localStorage.getItem('key')

// 从localStorage删除某个保存的数据
localStorage.removeItem('key')

// 从localStorage删除所有保存的数据
localStorage.clear();

本文由美洲杯赌球发布于计算机教程,转载请注明出处:sessionStorage和localStorage的使用

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。