精华内容
下载资源
问答
  • html5web存储方式

    千次阅读 2013-06-19 19:24:31
    一、web存储方式: 浏览器(客户端)访问服务器端的时候,携带的数据,之前这些数据保存在cookie中,但是cookie保存的数据大小有限 html5的web存储 html5的web存储分为: localStorage: sessionStorage: ...

    一、web存储方式:

    浏览器(客户端)访问服务器端的时候,携带的数据,之前这些数据保存在cookie中,但是cookie保存的数据大小有限

    html5web存储

    html5web存储分为:

    localStorage

    sessionStorage

    他们的区别在于:localStorage 存储在客户端,大小没有限制,时间也没有限制

    sessionStorage: 在当前访问的页面,一旦关闭这个页面,下次在访问的时候就会释放变量

    唯一的区别就在于,sessionStorage 保存的是当前访问的页面

    1localStorage sessionStorage把数据保存到本地,下次直接可以访问到跟php中的session相似

    3种设置本地存储的方法:

      localStorage.t1 = php;

      localStorage[t1] = cache;

      localStorage.setItem(t1,php);

    3种访问本地存储的方法:

      localStorage.t1;

      localStorage[t1];

      localStorage.getItem(t1);

       localStorage.getItem(localStorage.key(0))

    删除存储内容:

      localStorage.removeItem();  //清除

      localStorage.clear()            //清除所有

      localStorage.length        //获得有多少键

              localStorage.key() //获得存储的键对应的内容,获得元素的下标,下标从0开始

                localStorage.getItem()  通过下标获得对应的值

    展开全文
  • Web客户端的几种存储方式

    千次阅读 2017-09-26 21:25:46
    常见的浏览器端存储技术:cookie sessionStorage localStorage userData indexDB服务器端存储技术:session一、HTML5 web存储(WebStorage)HTML5 可以在本地存储用户的浏览数据,不存储在服务器上,可以存储...

    常见的浏览器端存储技术有

    cookie    sessionStorage    localStorage     userData     indexDB

    服务器端存储技术:

    session

    一、HTML5 web存储(WebStorage)

    HTML5 可以在本地存储用户的浏览数据,不存储在服务器上,可以存储大量数据而不影响网站性能。这些数据只用于用户请求网站数据。

    数据以键/值对存在。存储一些不需要和服务器进行交互的数据

    客户端存储临时数据的两种对象: localStorage   sessionStorage

    1、localStorage:没有时间限制的存储(关闭浏览器,再次打开浏览器,存储的数据依然存在)

    2、sessionStorage:针对一个session的数据存储(关闭浏览器窗口,存储的数据清空,即关闭窗口再次进浏览器数据清空了),前进、后退、刷新数据依然存在

    3、它们均只能存储字符串类型的对象

    4、都是用来存储客户端临时信息的对象

    5、不同浏览器无法共享sessionStorage、localStorage中的信息;

    相同浏览器不同页面可以共享localStorage中的信息(同协议,同域名,同端口);但是sessionStorage不行

     localStorage   sessionStorage的用法相同

     1、存储变量

      sessionStorage.setItem('key','value');      //key-是要存储的变量名,value-是变量的值

       localStorage.setItem('key','item');

      2、获取变量的值

      sessionStorage.getItem('key');              //key-是存储的变量名

       localStorage.getItem('key');

       3、删除指定变量

       sessionStorage.removeItem('key');

        localStorage.remove('key');

       4、删除本地存储的所有信息

        sessionStorage.clear();

        localStorage.clear();

       5、获取当前存储的键值对数量

       localStorage.length;

       sessionStorage.length;

    注意:localStorage 存储的值只能是字符串 形式。当存储的数据为引用对象,会默认调用对象的toString方法,转为字符串在存储。在存储数组的时候,存储的数据项以“,”隔开,解析的时候需要分解为数组在操作。对于对象,需要JSON.stringify转化在存储,获取数据后用JSON.parse转为对象

    1、数组:

    localStorage.setItem('testArr',[1,2,3]);
    console.log('数组的值:',localStorage.getItem('testArr'));
    //获取数组的第一项的值
    console.log('数组的第一项的值:',localStorage.getItem('testArr').split(',')[0]);
     显示结果:
    数组的值:1,2,3,4
    数组的第一项的值:1
    2、对象
    var data = {
          'a':2,
          'b':3
    };
    
    var dataStr = JSON.stringify(data);
    //直接存储对象
    localStorage.setItem('testObj',data);
    console.log('直接存储对象:',localStorage.getItem('testObj'));
    //存储转化后的变量
    localStorage.setItem('test_obj',dataStr);
    console.log('转化后存储对象:',localStorage.getItem('test_obj'));
    //重新解析对象
    var data = JSOPN.parse(localStorage.getItem('test_obj');
    console.log('重新解析对象:',data);

    显示结果:

    显示结果:

    直接存储对象:[object object]
    转化后存储对象:{"a":2,"b":3}
    重新解析对象:object{a:2,b:3}

    二、cookie存储

    在H5之前,cookie是主要的存储方式,cookie的存储一般限制在4KB左右,他的主要用途是保存登录信息,可以设置存储的有效期。cookie的生命周期是根据设置的expire时间来控制的。

    需要自己写操作函数实现操作:

    //设置cookie,name-存Cookie的变量名,value-变量的值,days-有效期
    function setCookie(name, value, days) {
        days = days || 30;           //没有设置有效期,默认有效期是30天
        var exp = new Date();        //获取当前日期
        exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); //设置过期日期
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
    }
    //获取cookie
    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) return unescape(arr[2]);
        else return null;
    
    }
    //删除cookie
    function delCookie(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = getCookie(name);
        if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
    }

     三、对三者的性能比较

    1、 cookie:
    数据生命期:可设置失效时间,默认是关闭浏览器后失效
    存放数据大小:一般是4KB左右
    与服务器端通信:每次都会携带在HTTP请求头里面,如果使用Cookie保存过多数据会带来性能问题
    易用性:需要自己封装,源生的Cookie接口不友好

    2、sessionStorage
    数据生命期:仅在当前会话有效,关闭页面或者浏览器后被清除
    存放数据大小:一般5MB
    与服务器端通信:仅在客户端保存(浏览器),不参与和服务器的通信
    易用性:源生接口可用,也可再次封装,对Object  Array有更好的支持

    3、localStorage
    数据生命周期:除非被清除,否则永远保留
    存放数据大小:一般5MB
    与服务器端通信:仅在客户端保存(浏览器),不参与和服务器的通信
    易用性:源生接口可用,也可再次封装,对Object  Array有更好的支持

    四、应用场景
    Cookie:保存登录信息
    localStorage:保存购物车信息,游戏数据
    sessionStorage:

    不要在存储系统中存储敏感信息

    五、离线缓存 application cache
    应用程序缓存,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中存储数据,可以使用一个描述文件     (manifest file),列出要下载和缓存的文件,在断网的时候也可以应用




    展开全文
  • Html5 Web的5中离线存储方式...HTML5的离线存储方式有多种:Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。 Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储

    Html5 Web的5中离线存储方式之localStorage

    在HTML5越来越流行的今天,如果你还不知道离线存储,那就说明你落后了很多。
    HTML5的离线存储方式有多种:Web SQL Database、LocalStorage、Cookie、WebStorage、IndexedDB、FileSystem。
    Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展。我就不多说了。
    今天我们主要看LocalStorage这种最简单的本地存储方式。

    先来看一个小例子

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTML5中LocalStorage的使用</title>
    </head>
    <body>
        <p>
      你浏览当前页面
      <span id="count">N</span>
      次.
    </p>
    <script>
        if (!localStorage.pageLoadCount)
            localStorage.pageLoadCount = 0;
        localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
        document.getElementById('count').textContent = localStorage.pageLoadCount;
    </script>
    </body>
    </html>

    看看运行效果这里写图片描述

    /**
     * 保存/更新数据
     */
    function saveDm(dataModel){
        window.localStorage['DataModel'] = dataModel;
    }
    
    /**
     * 获取数据
     */
    function getDm(){  
        var value = window.localStorage['DataModel'];
        if(value){
            return value;
        }    
        return '';
    }
    
    /**
     * 删除数据
     */
    function clearDm(){
        if(window.localStorage['DataModel']){
            delete window.localStorage['DataModel'];        
        }   
    }

    欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

    展开全文
  • web存储 实现本地存储

    千次阅读 2016-12-01 19:36:21
    但是毛概课无意把书翻到那一页,无意中看了一点, ...HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用

    本来没想看html5,

    但是毛概课无意把书翻到那一页,无意中看了一点,


    HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式。


    什么是 HTML5 Web 存储?

    使用HTML5可以在本地存储用户的浏览数据。

    早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

    数据以 键/值 对存在, web网页的数据只允许该网页访问使用。


    浏览器支持

    Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

    注意: Internet Explorer 7 及更早IE版本不支持web 存储.


    localStorage 和 sessionStorage 

    客户端存储数据的两个对象为:

    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储


    localStorage 对象

    localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

    不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

    • 保存数据:localStorage.setItem(key,value);
    • 读取数据:localStorage.getItem(key);
    • 删除单个数据:localStorage.removeItem(key);
    • 删除所有数据:localStorage.clear();
    • 得到某个索引的key:localStorage.key(index);


    sessionStorage 对象

    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

    使用方法:
    保存数据:sessionStorage.setItem("website", "W3Cfuns.com");
    读取数据:sessionStorage.getItem("website");

    开发一个简单的网站列表程序

    网站列表程序实现以下功能:

    • 可以输入网站名,网址,以网站名作为key存入localStorage;
    • 根据网站名,查找网址;
    • 列出当前已保存的所有网站;
    图示:


    代码:

    js:

    //保存数据  
    function save(){  
        var siteurl = document.getElementById("siteurl").value;  
        var sitename = document.getElementById("sitename").value;  
        localStorage.setItem(sitename, siteurl);
        alert("添加成功");
    }
    //查找数据  
    function find(){  
        var search_site = document.getElementById("search_site").value;  
        var sitename = localStorage.getItem(search_site);  
        var find_result = document.getElementById("find_result");  
        find_result.innerHTML = search_site + "的网址是:" + sitename;  
    }


    html:

    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
        <label for="sitename">网站名(key):</label>  
        <input type="text" id="sitename" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">网 址(value):</label>  
        <input type="text" id="siteurl" name="siteurl"/>  
        <br/>  
        <input type="button" οnclick="save()" value="新增记录"/>  
        <hr/>  
        <label for="search_phone">输入网站名:</label>  
        <input type="text" id="search_site" name="search_site"/>  
        <input type="button" οnclick="find()" value="查找网站"/>  
        <p id="find_result"><br/></p>  
    </div>









    展开全文
  • HTML5 web 存储,一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些...
  • jQuery web存储 详解

    千次阅读 2015-03-16 11:40:04
     写在本章开始前: 第十七章作为独立的一章,涉及到jQuery的方方面面,是篇幅很长的一章。为了更新客户端存储(本...比方说,web应用就可以用这些方式来“记住”用户的偏好甚至是用户的所有状态信息,以便准确
  • 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用...
  • Web存储-localStorage和sessionStorage

    千次阅读 2017-03-10 09:53:40
    但是Web存储需要更加安全与快速。这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它可以存储大量数据,而不影响网站的性能。 数据以键值对存在,web网页的数据只允许该网页访问使用。
  • 原文链接:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html ... html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储
  • 1,Web存储介绍 HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种: (1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。 ...
  • Web服务器有哪些(转)

    万次阅读 2019-04-30 16:15:34
    文章目录1、什么是web服务器1.1 Web Service架构和云1.2 Web Service的优势1.3 Web service的发展趋势1.3 本地服务的缺陷2、web服务器有哪些2.1 Apache2.2 IIS2.3 Nginx2.4 Tomcat2.5 Lighttpd2.6 Zeus 1、什么是web...
  • JavaScript 第二十六篇 Web存储机制

    万次阅读 2019-11-21 21:48:09
    Web Storage 最早是在 Web 超文本应用技术工作组(WHAT-WG)的 Web 应用 1.0 规范中描述的。 这个规范的最初的工作最终成为了 HTML5 的一部分。Web Storage 的目的是克服由 cookie 带来的一些限制,当数据需要被严格...
  • HTML5 Web存储(Web Storage)技术及用法

    千次阅读 2015-08-28 11:40:21
    这些新功能中一个非常让我感兴趣,它就是Web存储(Web Storage)。Web存储(Web Storage)提供了一个在浏览器端保存用户会话信息的方法。下面让我们来看一看Web存储(Web Storage)的基本用法!Web存储
  • web 服务器有哪些

    万次阅读 多人点赞 2018-08-27 16:53:49
    ,即它把存储或计算环节"外包"给其他网站了,那么我们就说这个软件属于Web Service架构。 Web Service架构的基本思想,就是尽量把非核心功能交给其他人去做,自己全力开发核心功能。比如,如...
  • html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 setItem存储value 用途:将value存储到key字段 用法:.setItem( key, value) 代码示例: sessionStorage.setItem("key", ...
  • 如题,嵌入式web服务器的数据存储方式,还有就是类似于路由器设备,其登陆 界面的数据存储 ,是存入数据库,还是文件存储呢,存数据库是哪种数据库,文件是什么格式
  • 浏览器端的存储技术有哪些

    千次阅读 2016-12-05 15:53:36
    常用的浏览器存储技术
  • HTML5 Web 存储(localStorage和sessionStorage)

    万次阅读 多人点赞 2018-09-24 21:25:38
    HTML5 Web 存储是本地存储存储在客户端,包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的,通常以字符串存储。 localStorage localStorage生命周期是永久,除非主动清除localStorage...
  • 总而言之,浏览器数据存储领域拥有多种不同方式可供选择,而且每一种都非常充分的存在价值。 无论如何,开发人员们努力通过cookies向服务器发送简单的小型名-值对的时代已经结束。今天,我们拥有更多优秀的...
  • web本地存储(localStorage、sessionStorage)

    万次阅读 多人点赞 2017-04-26 18:38:23
    对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器...
  • web浏览器数据本地存储

    千次阅读 2020-08-21 17:53:16
    在浏览器中存储主要分为以下三种方式 localstorage 2、sessionStorage 3、cookie localStorage 生命周期永久,除非用户清除浏览器中的localStorage信息,否则永远存在; 存放数据大小一般为5MB; 仅在浏览器中保存...
  • localStorage 和 sessionStorage localStorage - 用于长久保存整个网站...首先检测浏览器是否支持web存储 if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....
  • Web前端实现本地存储

    千次阅读 2017-06-29 16:38:38
    1、本地化存储概念以及历史 历史: 概念 类型   HTPP cookie 1.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。 2.Cookie是为了...
  • 来自专栏《前端面试题》 前言 ...❤️ 简介:没有什么远大的理想,做自己喜欢的事情就好~ ❤️ 扫码关注微信公众号: >...目录前言一年级实现的功能什么是 HTML5 Web 存储?localStorage如何使用ses
  • HTML5的几种存储方式

    万次阅读 2017-07-01 20:27:34
    HTML5的几种存储方式html5在引入webStorage之前,主要用cookies.web storagehtml5的webstorage 分两种:LocalStorage 和SessionStorage,两者的差别主要在生命周期不同。 LocalStorage LocalStorage用于持久化的...
  • html5的web存储与cookie的区别

    千次阅读 2015-07-29 10:16:56
    之前我们制作网站基本都是通过cookie实现本地缓存数据的,但因为cookie本身存储容量小,而安全系数也不是太高,所以很多地方用起来都会有些吃力,而HTML5为我们提供了方便快捷的web存储机制。 客户端存储的特性: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 944,065
精华内容 377,626
关键字:

web存储方式有哪些