zoukankan      html  css  js  c++  java
  • WebStorage的使用

    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;
        }
        //处理事务
    }
  • 相关阅读:
    通过vue-cli命令行安装uni-app
    微信小程序中父子通信
    react启动问题
    react 父子通信
    windows下MongoDB的安装和启动服务--转载
    vue中使用骨架 vue-skeleton-webpack-plugin
    像企业一样思考
    Promise原理详解
    如何封装一个Cookie库
    你应该知道的浏览器缓存知识
  • 原文地址:https://www.cnblogs.com/huliang56/p/5707970.html
Copyright © 2011-2022 走看看