zoukankan      html  css  js  c++  java
  • 快速理解webStroage

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <fieldset id="">
                <legend>sessionStorage</legend>
                <input type="text" name="" id="txt1" value="" />
                <br />
                <input type="button" name="save1" id="save1" value="保存数据" />
                <input type="button" name="get1" id="get1" value="读取数据" />
                <input type="button" name="del1" id="del1" value="删除数据" />
            </fieldset>
            <fieldset id="">
                <legend>localStorage</legend>
                <input type="text" name="" id="txt2" value="" />
                <br />
                <input type="button" name="save2" id="save2" value="保存数据" />
                <input type="button" name="get2" id="get2" value="读取数据" />
                <input type="button" name="del2" id="del2" value="删除数据" />
            </fieldset>
        </body>
        <script type="text/javascript">
            
            document.getElementById("save1").onclick = function(){
                var sinput = document.getElementById("txt1").value;
                sessionStorage.setItem("session1",sinput);
            }
            document.getElementById("get1").onclick = function(){
                var con = sessionStorage.getItem("session1");
                var str = document.createElement("span");
                str.innerHTML = con;
                document.getElementsByTagName("fieldset")[0].appendChild(str);
            }
            document.getElementById("del1").onclick = function(){
                sessionStorage.removeItem("session1");
                document.getElementsByTagName("fieldset")[0].getElementsByTagName("span")[0].innerHTML=""
            }
            
            document.getElementById("save2").onclick = function(){
                var sinput = document.getElementById("txt2").value;
                localStorage.setItem("local1",sinput);
            }
            document.getElementById("get2").onclick = function(){
                var con = localStorage.getItem("local1");
                var str = document.createElement("span");
                str.innerHTML = con;
                document.getElementsByTagName("fieldset")[1].appendChild(str);
            }
            document.getElementById("del2").onclick = function(){
                localStorage.removeItem("local1");
                document.getElementsByTagName("fieldset")[1].getElementsByTagName("span")[0].innerHTML=""
            }
            
        </script>
    </html>

    Web Storage功能,就是在Web上存储数据,分为两种:

    sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到该网站所有域名被关闭所经过的这段时间,session对象可用来保存在这段时间内所要求保存的任何数据


    localStorage:将数据保存在客户端本地的硬件设备中,即使浏览器关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可用

    区别:sessionStorage为临时保存,localStorage为永久保存。

    HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除。localStorage提供了几个方法:
    1、存储:localStorage.setItem(key,value)
    如果key存在时,更新value

    2、获取:localStorage.getItem(key)
    如果key不存在返回null

    3、删除:localStorage.removeItem(key)
    一旦删除,key对应的数据将会全部删除

    4、全部清除:localStorage.clear()
    某些时候使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

    5、遍历localStorage存储的key
    .length 数据总量,例:localStorage.length
    .key(index) 获取key,例:var key=localStorage.key(index);

    6、存储JSON格式数据
    JSON.stringify(data)  将一个对象转换成JSON格式的数据串,返回转换后的串
    JSON.parse(data) 将数据解析成对象,返回解析后的对象。

    sessionStroage的用法和localStroage的用法一样,在存储数据的过程中,所有数据全部以字符串类型保存。

    存取对象时用Json.stringfy()方法将对象转换成字符串

    var str = {
                age:12,
                name:"sa"
            }
            str=JSON.stringify(str);
            localStorage.setItem("obj",str);

     将字符串转换成对象用JSON.parse()方法

        console.log(JSON.parse(localStorage.getItem("obj")))
  • 相关阅读:
    VC6.0 突然打不开dsw 工程文件的解决方案
    windows10 专业版的远程服务器管理工具下载
    Win10更新
    Python爬取网络图片
    SQL中触发器的使用
    SQL中游标的使用
    SQL 中用户定义函数的使用方法
    linux mint 五笔安装方法
    远程桌面为什么勾选上了本地资源,但是在远程的计算机上还是不显示本地资源磁盘呢,是什么原因导致的
    Linux Mint SmoothTask2的安装方法
  • 原文地址:https://www.cnblogs.com/wmwPro/p/5643050.html
Copyright © 2011-2022 走看看