浅谈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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
eslint 的三大通用规则详解
May 16 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
Node.js实现断点续传
Jun 23 #Javascript
JavaScript实现登录窗体
Vue + iView实现Excel上传功能的完整代码
基于JavaScript实现年月日三级联动
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
动态表格Table类的实现
2009/08/26 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python版本的读写锁操作方法
2016/04/25 Python
对numpy中轴与维度的理解
2018/04/18 Python
python将视频转换为全字符视频
2019/04/26 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python 支持向量机分类器的实现
2020/01/15 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
运动会演讲稿50字
2014/08/25 职场文书
机关党员公开承诺书
2014/08/30 职场文书
个人合伙协议书范本
2014/10/14 职场文书