浅谈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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Node.js实现断点续传
Jun 23 #Javascript
JavaScript实现登录窗体
Vue + iView实现Excel上传功能的完整代码
基于JavaScript实现年月日三级联动
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
基于JavaScript实现省市联动效果
JavaScript实现简单计时器
You might like
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python实现备份目录的方法
2015/08/03 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python实现图片批量压缩程序
2018/07/23 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python如何获取文件指定行的内容
2020/05/27 Python
如何理解python面向对象编程
2020/06/01 Python
Python 解析xml文件的示例
2020/09/29 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
优秀毕业生推荐信范文
2014/03/07 职场文书
新农村建设标语
2014/06/24 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
小鞋子观后感
2015/06/05 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书