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

HTML5本地存储 Web Storage

程序员文章站 2022-05-17 19:17:43
 html5 定义了本地存储规范 web storage , 提供了两种存储类型 api  sessionstorage 和 localstorage,二者的差异主要是数据的保存时长及数据...
 html5 定义了本地存储规范 web storage , 提供了两种存储类型 api  sessionstorage 和 localstorage,二者的差异主要是数据的保存时长及数据的共享方式。

 

    localstorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;

 

    sessionstorage在会话期内有效,数据在关闭后自动删除;

 

    localstorage是基于域的,任何在该域内的页面都可以访问, sessionstorage在保存它的窗口,和由当前窗口创建的新窗口有效,直到相关联的标签页关闭; 

 

  web storage其实是html4 中 cookies存储机制的一个改进版本,但是两种机制的功能又不相同:

 

    cookie在浏览器和服务器间来回传递, sessionstorage和localstorage不会;

 

    sessionstorage和localstorage的存储空间更大,有更多丰富易用的接口,各自独立的存储空间;

 

  请注意以上区别,前端面试中,只要问到 html5 相关 基本就这些。

 

浏览器的支持情况

  目前所有主流的浏览器都在一定程度上支持 html5 的 web storage特性。 由下图可以看出,基本上所有现代浏览器都已经支持 web storage。

 

  

 

  移动浏览器的情况更为乐观

 

 

 

  android平台和 ios 平台各自的浏览器都基本上支持 web storage 本地存储特性。 目前市场上的移动设备, 除了 android 手机和 iphone 手机外,越来越多的平板电脑面世,而且基本上依赖着两种平台。在移动端使用 web storage 我们几乎不需要考虑浏览器是否支持, 当然从代码的严谨来说,建议最好在使用前先检查浏览器是否支持

 

复制代码

if (window.localstorage) {

    // 浏览器支持 localstorage

}

 

if (window.sessionstorage) {

    // 浏览器支持 sessionstorage

}

复制代码

web storage api

复制代码

interface storage {

  readonly attribute unsigned long length;

  domstring? key(unsigned long index);

  getter domstring getitem(domstring key);

  setter creator void setitem(domstring key, domstring value);

  deleter void removeitem(domstring key);

  void clear();

};

复制代码

  所谓domstring: 一个utf-16字符串,javascript正是使用了这种编码的字符串,所以domstring就等同是javascript中的string.

 

  每个存储对象提供一个 key/value ( 键/值 ) 对列表, 被称为数据项。 key 可以是任意的字符串( 包括空字符串 ),value 也可以是任意的字符串。

 

  规范定义的接口提供了: 

 

  localstorage.length                          一个只读的 length属性。 可以知道 localstorage 中存储着多少条数据

 

  localstorage.setitem(key, val)          存储一条数据

 

  localstorage.getitem(key)                通过 key 获取该条数据

 

  localstorage.removeitem(key)          删除一条数据 

 

  localstorage.clear()                         清空所有 key/value 键值对 items

 

      

 

  storage 只能存储key/value对,而且只支持字符串类型的数据, setitem() 方法传入的值都会自动转化为 string 类型。复合数据类型(array object)转化结果同 tostring 方法。

 

   如果你想保存其它类型的数据,在保存的时候需要转化成字符串,在读取时,再转化回来;

 

  使用 localstorage 存储和读取 json 格式数据:

 

复制代码

// 定义json格式字符串

var userdata = {

    name: "zichen",

    age: "24",

    sex: "男",

    adress: "杭州"

}

 

// 存储 userdata 数据

localstorage.setitem("userdata", json.stringify(userdata));

 

// 读取 userdata 数据并赋值给变量

var newuserdata = json.parse(localstorage.getitem("userdata"));

 

console.log(newuserdata);

 

// 删除 userdata 

localstorage.removeitem("userdata");

复制代码

  sessionstorage 浏览器支持情况同 localstorage , 属性和方法及使用方式也和 localstorage一致。

 

storage 事件监听

  对 storage 进行存取操作的同时,如果需进行监听,可以使用 html5 web storage api内置的事件监听器对数据进行监控, storage中的数据有任何变动,storage监听器都能捕获,接口定义:

 

复制代码

interface storageevent : event {

  readonly attribute domstring key;

  readonly attribute domstring? oldvalue;

  readonly attribute domstring? newvalue;

  readonly attribute domstring url;

  readonly attribute storage? storagearea;

};

复制代码

  key 表示属性中的键名。

 

  oldvalue 更新前的键值。

 

     newvalue 数据更新后的键值。

 

  url 记录 storage 事件发生时的源地址。

 

  storagearea 指向事件监听对应的 storage对象

 

  

 

  使用 w3c 标准事件注册方法 addeventlistener 进行注册监听:

 

window.addeventlistener(“storage”,

    function(e) {

        console.log(e)

    },

    true);