Web Storage

简介:      Web Storage 是一种简单的将JavaScript处理的数据永久保存的接口,它可以让我们不通过服务器进行数据的读写,可以很好的减少和服务器的通信,实现离线操作。

     Web Storage 是一种简单的将JavaScript处理的数据永久保存的接口,它可以让我们不通过服务器进行数据的读写,可以很好的减少和服务器的通信,实现离线操作。

     特点:

     1、以键值对的形式存储

     2、能够以普通JavaScript对象的方式进行读写

    Web Storage提供了同源服务的共享内存,不同服务,只要源相同,就可以共享存储,大部分浏览器以5MB为上限,Web Storage 实体是全局对象中对已的localStorage和sessionStorage 两个对象,localStorage中保存的数据只要没被显式的删除,就不会丢失,sessionStorage保存数据仅在同一个会话中保留。


基本操作:

     1、数据的读写:

            可以通过setItem方法将数据存至localStorage中,并通过getItem方法引用数据,也可以通过相应的语法进行读取

            

//数据保存,以下3行等价
localStorage.setItem('foo','bar');
localStorage.foo='bar';
localStorage['foo']='bar';

//数据的引用,以下3行等价
var data= localStorage.getItem('foo');
var data= localStorage.foo;
var data= localStorage['foo']
       localStorage只能对字符串进行读写,若要存储对象,可以使用JSON.stringfy和JSON.parse方法,进行相关转换


      2、数据的删除:

       可以通过removeItem方法删除,也可以通过相应的语法进行删除。

     

//删除数据
localStorage.removeItem('foo');
delete localStorage.foo;
delete localStorage['foo'];
       若要一次性全部删除,可以使用clear方法。


      3、数据的枚举

     可以通过key方法和length属性来枚举localStorage中的数据,也可以通过for in语句枚举

    

//key方法和length枚举
for(var i=0;i<localStorage.length;i++) {

     var key =localStorage.key(i),
           value=localStorage[key];
}

//通过for in语句枚举
for(var key in localStorage) {
    //使用直接属性
    if(localStorage.hasOwnProperty(key)) {
       var value=localStorage[key];
    }
}


Web Storage中的storage事件:

    在某一个窗口改变了Web Storage的数据后,就会在其他窗口触发storage事件,通过监听该事件,就能保证多个同时打开窗口间的数据一致性。

   

window.addEventListener('storage',function(event) {
    if(event.key === 'userid'){
         var msg = 'Hello '+ event.newValue;
         document.getElementById('msg').textContent = msg;
    }
},false);

命名空间的管理:

    应该避免直接对于localStorage的数据添加,而是对于一个服务,创建该服务对应的命名空间,然后将其绑定到localStorage中

//以服务为单位进行命名空间管理

var SERVICE_NAME ='my service',
      mystorage = null;
//通过load事件读取数据到本地变量
window.onload = function() {
     try{
           mystorage =JSON.parse(localStorage[SERVICE_NAME] || '{}');
     }catch(e){
           mystorage = {};
      }
};
//通过beforeunload事件将数据写入localStorage
window.onbeforeunload = function() {
    localStorage[SERVICE_NAME] = JSON.stringfy(storage);
}

此时,对于多个标签页的数据一致性问题,就需要在合适的时间,将本地变量写入localStorage中进行同步,并捕捉storage事件,在其他页执行更新操作,读到本地变量。

//写入localStorage
function setStorage(key,value){
     storage[key] = value;
     localStorage[SERVICE_NAME] =JSON.stringfy(storage);
}

//其他页内读入本地变量
window.onstorage= function(event) {
    if(event.key === SERVICE_NAME && event.newValue){
        storage = JSON.parse(event.newValue);
    }
}





目录
相关文章
|
5月前
|
存储 缓存 NoSQL
Web Storage与IndexedDB存储
Web Storage(包括sessionStorage和localStorage)提供简单的键值对存储,适合会话数据存储。IndexedDB是浏览器中的NoSQL数据库,支持复杂查询和事务,适用于大量数据存储。简而言之,Web Storage适合简单需求,IndexedDB适合复杂存储和查询。示例代码展示了两者用法。
|
存储 Web App开发 JavaScript
web存储(Storage)
web存储(Storage)
|
存储 安全 API
HTML学习笔记(七) Web Storage
HTML学习笔记(七) Web Storage
120 0
|
存储 移动开发 JSON
【前端】【H5 API】Web存储 Web Storage
【前端】【H5 API】Web存储 Web Storage
285 0
|
存储 Web App开发 缓存
Web Storage API的介绍和使用
Web Storage API的介绍和使用
Web Storage API的介绍和使用
|
存储 Web App开发 移动开发
|
Web App开发 存储 移动开发
|
Web App开发 存储
HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,WebStorage官方建议为每个网站5MB。 Web Storage又分为两种:        sessionStorage        localStorage   从字面意思就可以很清楚的看出来,ses
1446 0