zoukankan      html  css  js  c++  java
  • LocalStorage本地存储

      LocalStorage,即"Web存储",某些浏览器供应商也叫"本地存储"、"DOM存储",原本作为HTML5标准的一部分,后来因为某些原因被抽离出来作为单独的WEB应用标准。localStorage提供了一种方式,让Web页面在客户端浏览器中以键值对的形式存储本地字符串数据,无论是用户是离开该站点,刷新,关闭浏览器还是其他操作,存储的数据依然存在。

    一、localStorage与cookie

      localStorage与cookie一样,都是在客户端浏览器下存储数据,但是又有不同:

      1、cookie是document的属性,值类型为string,localStorage是window的属性,值类型为object;

      2、cookie会随着每一次HTTP请求附带发送,无论服务器端是否需要,而且未加密(基于SSL的站点除外);localStorage不会,除非手动将其发送到远程服务器,否则只单纯存储在客户端本地;

      3、cookie最大为4Kb,localStorage在每个域下最大为5Mb;

      4、就支持性而言,主流浏览器如IE6+,chrome,Firefox都支持cookie,但是低版本的IE如IE67不支持localStorage。

    二、localStorage操作

      IE对localStorage的操作需要在非本地环境(非file://...)下进行才能看到效果。

      1、判断浏览器支持性

        function suportStorage(){
            return "localStorage" in window && window["localStorage"] !== null; 
        }
    
        if(suportStorage()){
            // 浏览器内置支持localstorage
            // to do..
        }else{
            // 没有本地HTML5存储支持
            // 尝试第三方方案,如dojox.storage
        }

      2、localStorage的属性和方法

      1)获取 getItem(key) 或 localStorage[key]  

        // 获取
        var name = localStorage["name"];
        var name = localStorage.getItem("name");

       2)修改 setItem(key, value) 或者 localStorage[key] = value

        // 修改
        localStorage["name"] = "xx";      
        localStorage.setItem("name", "xx");

      3)删除指定的key, removeItem(key)

        // 删除
        localStorage.removeItem("name");

      4)删除所有key

        // 清空
        localStorage.clear();

      5) length 用来获取存储区所有数据的个数

    var len = localStorage.length;

       6) key 用来获取localStorage指定索引值的key

        localStorage["name"] = 1;
        localStorage["name2"] = 3;
        localStorage.key(0) // 输出 name

      注意:localStorage对象在操作setItem的属性的顺序并不一定是实际存储在localStorage上的索引顺序,localStorage在setItem执行完后,标准浏览器如Chrome,Firefox等以及高版本的IE9+会在内部按照key的unicode进行一次排序,但是IE678则只是按照属性定义的顺序输出,不对key进行排序,如:  

        localStorage["name"] = 1;
        localStorage["1"] = 2;
        localStorage["name2"] = 3;
        localStorage.key(0); // Chrome/Firefox/Safari/IE9+输出的是1,IE678输出name

    三、localStorage事件

      localStorage提供了监听localStorage实际发生变化的事件storage,任何时候只要setItem(), getItem(), clear(), removeItem()方法被调用,且实际改动了数据时,都会在window对象上触发storage事件。  

        if(window.addEventListener){
            window.addEventListener("storage", handle, false);
        }else{
            window.attachEvent("onstorage", handle)
        }
  • 相关阅读:
    父容器的flowover:hidden 必须配合父容器的宽高height width才能生效
    css使 同一行内的 文字和图片 垂直居中对齐?
    vim查找替换
    要让div中的float不会自动显示到下一行来?
    如何理解clear的css属性?
    div+css使多行文字垂直居中?
    VMnet1和V8
    unslider的用法详解
    json的中括号和大括号的使用?
    如何合理定价,定价定天下,必须要学会这个哦!
  • 原文地址:https://www.cnblogs.com/mr189/p/3704735.html
Copyright © 2011-2022 走看看