浅谈Web Storage API的使用


Posted in Javascript onJune 23, 2021
目录
  • 一、浏览器的本地存储技术
    • 1.1、sessionStorage
    • 1.2、localStorage
  • 二、Web Storage相关接口
  • 三、浏览器兼容性
  • 四、隐身模式
  • 五、使用Web Storage API

 

一、浏览器的本地存储技术

除了最早的使用cookie来进行本地存储之外,现代浏览器使用Web Storage API来方便的进行key/value的存储。

Web Storage有两种存储方式:

 

1.1、sessionStorage

对于每一个访问源,都会维持一个独立的存储区域。只要浏览器不关闭,这些数据都不会消失。

所以这种存储叫做session存储。

注意,这里的session和服务器端的session的意思是不一样的,这里的sessionStorage只是本地的存储,并不会将数据传输到服务器端。

sessionStorage的存储容量要比cookie大得多,可以达到5MB。

 

1.2、localStorage

和sessionStorage类似,也是用来做数据存储的,不同的是localStorage存储的数据不会随着浏览器的关闭而消失。

我可以通过设置过期时间,使用javascript手动删除或者清楚浏览器缓存来清除localStorage。

这两种存储方式是通过Window.sessionStorage 和 Window.localStorage来使用的。事实上我们看下Window的定义:

interface Window extends EventTarget, AnimationFrameProvider, GlobalEventHandlers, WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage 

Window继承了WindowLocalStorage和WindowSessionStorage,所以我们可以直接从Window来获取sessionStorage和localStorage。

对于每一个origin源来说,Window.sessionStorage 和 Window.localStorage 都会创建一个新的Storage对象,用来进行数据的读取。

 

二、Web Storage相关接口

和web storage相关的接口有三个。第一就是刚刚讲到的window。我们可以通过window获取sessionStorage和localStorage。

第二个就是Storage对象,获取到的两个Storage都是Storage对象。

interface Storage {

    readonly length: number;

    clear(): void;

    getItem(key: string): string | null;

    key(index: number): string | null;

    removeItem(key: string): void;

    setItem(key: string, value: string): void;
    [name: string]: any;
}

我们可以看到Storage对象为我们提供了很多有用的方法,对数据进行存取。

第三个就是StorageEvent,当storage发现变化的时候就会触发StorageEvent事件。

 

三、浏览器兼容性

我们用两张图来看一下这两个storage在不同浏览器的兼容性:

Window.localStorage:

浅谈Web Storage API的使用

Window.sessionStorage:

浅谈Web Storage API的使用

可以看到,现代浏览器基本上都是支持这两种storage特性的。

如果我们使用的是老式的浏览器,比如Internet Explorer 6 ,7 或者其他没有列出的浏览器,我们就需要进行检测,判断Storage是否被浏览器有效的支持。

我们看下怎么做检测:

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

其中的type就是localStorage或者sessionStorage,我们通过捕获异常来判断是否存在有效的Storge对象。

看下我们怎么使用:

if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
}

 

四、隐身模式

大多数现代浏览器都支持一种隐身模式,在这种模式下,将不会存储浏览历史记录和Cookie等数据隐私选项。

所以这和Web Storage是不兼容的。那么怎么解决这个问题呢?

不同的浏览器可能采用不同的解决办法。

比如Safari中,隐身模式下Web Storage虽然是可用的,但是不会存储任何东西。

也有些浏览器会选择在浏览器关闭的时候清空之前的所有存储。

所以,我们在开发的过程中,一定要注意不同浏览器的不同处理方式。

 

五、使用Web Storage API

对于Storage对象,我们可以像普通对象一样直接访问对象中的属性,也可以使用Storage.getItem() 和 Storage.setItem() 来访问和设置属性。

注意Storage对象中的key value都是string类型的,即使你输入的是integer,也会被转换成为String。

下面的例子,都可以设置一个colorSetting属性:

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

虽然三种方式都可以实现存取的功能,但是我们推荐使用Web Storage API:setItem, getItem, removeItem, key, length等。

除了对Storage中的值进行设置之外,我们还可以触发和监听StorageEvent。

先看一下StorageEvent的定义:

interface StorageEvent extends Event {

    readonly key: string | null;

    readonly newValue: string | null;

    readonly oldValue: string | null;

    readonly storageArea: Storage | null;

    readonly url: string;
}

每当Storage对象发送变化的时候,就出触发StorageEvent事件。

注意,如果是sessionStorage的变化,则不会被触发。

如果一个domain中的某个页面发生了Storage的变化,那么这个domain的其他页面都会监听到这个变化。当然,如果是其他domain的话,是监听不到这个StorageEvent的。

我们可以通过window的addEventListener方法,来添加storage事件,如下所示:

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

上面的例子中,我们从StorageEvent中获取了key,oldValue,newValue,url和Storage对象。

以上就是浅谈Web Storage API的使用的详细内容,更多关于Web Storage API的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
js读取cookie方法总结
Oct 31 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
React如何避免重渲染
Apr 10 Javascript
js html实现计算器功能
Nov 13 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
vue实现分页加载效果
Dec 24 Javascript
Node.js实现断点续传
Jun 23 #Javascript
JavaScript实现登录窗体
Vue + iView实现Excel上传功能的完整代码
基于JavaScript实现年月日三级联动
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
You might like
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
详解Python Socket网络编程
2016/01/05 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python中round函数如何使用
2020/06/19 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
小学课改工作总结
2015/08/13 职场文书
初一语文教学反思
2016/03/03 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android