首页 > 生活服务 > 程序猿源

程序猿源

WebStorage的使用

管理员 2年前 1564浏览

HTML5中的WebStorage有两种类型的API:localStorage和sessionStorage;


  localStorage在本地永久性存储数据,除非显式将其删除或清空;


  sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。


localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。


localStorage提供了几个方法:

1、存储:localStorage.setItem(key,value)


2、获取:localStorage.getItem(key)


3、删除:localStorage.removeItem(key)


4、全部清除:localStorage.clear()


5、遍历localStorage存储的key

  .length 数据总量,例:localStorage.length

  .key(index) 获取key,例:localStorage.key(index);


6、存储JSON格式数据

JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的数据串

JSON.parse(data) 将数据解析成对象,返回解析后的对象


************************************************************

var array = [0, 1, 1, 1];
//存储,IE6~7 cookie 其他浏览器HTML5本地存储
if (window.localStorage) {
    localStorage.setItem("title", array);
} else {
    Cookie.write("title", array);
}

//获取
var data = window.localStorage? localStorage.getItem("title"): Cookie.read("title");

 7、storage事件:当键值改变或者clear的时候,就可以触发storage事件


  当存储的storage数据发生变化时都会触发它,但是它不同于click类的事件会冒泡和能取消;


  storage改变的时候,触发这个事件会调用所有同域下其他窗口的storage事件,不过它本身触发storage即当前窗口是不会触发这个事件的(当然ie这个特例除外,它包含自己本身也会触发storage事件);


  使用方向,多窗口间多通信等;


  storage的events对象的属性常用的如下: 


    oldValue:更新前的值。如果该键为新增加,则这个属性为null;


    newValue:更新后的值。如果该键被删除,则这个属性为null;

    url:原始触发storage事件的那个网页的网址;

    key:存储store的key名。


  局限:可能出现大量冗余数据存储,store安全性有限

if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage,false); 
}else if(window.attachEvent){ 
    window.attachEvent("onstorage",handle_storage); 
} 
function handle_storage(e){
    if(!e){
        e=window.event;
    }
    //处理事务
}



版权声明:本文为原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
关注微信公众号:"cq_xifan";

评论

收藏

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

Powered By 重庆饭哥 © 2014-2022 教学资源分享站 渝ICP备20005643号-1

相信有一天,理想主义终将所向披靡.

Design by © 2021 XIFAN. Powered by 重庆饭哥

站点声明: 本站转载作品版权归原作者及来源网站所有,原创内容作品版权归作者所有,任何内容转载、商业用途等均须联系原作者并注明来源。

友情链接: 官方网站 饭哥在线工具 饭哥导航 在线运行 博客交流社区 重庆艺术工程职业学院