zoukankan      html  css  js  c++  java
  • HTML5 Web Storage

    WebStorage是什么?

    binnan
    0.6152018.07.27 20:50:11字数 573阅读 13,889

    WebStorage

    使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

    Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:

    • 提供一种在cookie之外存储会话数据的途径。
    • 提供一种存储大量可以跨会话存在的数据的机制。

    Web Storage又分为两种: sessionStorage 和localStorage ,即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地。其API提供的方法有以下几种:

        - setItem (key, value) ——  保存数据,以键值对的方式储存信息。
    
        - getItem (key) ——  获取数据,将键值传入,即可获取到对应的value值。
    
        - removeItem (key) ——  删除单个数据,根据键值移除对应的信息。
    
        - clear () ——  删除所有的数据
    
        - key (index) —— 获取某个索引的key
    

    localStorage

    localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,使用的方法如上所示。localStorage有length属性,可以查看其有多少条记录的数据。使用方法如下:

         var storage = null;
             if(window.localStorage){              //判断浏览器是否支持localStorage
                storage = window.localStorage;     
                storage.setItem("name", "Rick");    //调用setItem方法,存储数据
                alert(storage.getItem("name"));     //调用getItem方法,弹框显示 name 为 Rick
                storage.removeItem("name");     //调用removeItem方法,移除数据
                alert(storage.getItem("name"));   //调用getItem方法,弹框显示 name 为 null
     
             }
    

    localStorage 相对sessionStorage简单一点,需要注意的地方不是很多。

    sessionStorage

    sessionStorage 的生命周期是在浏览器关闭前。也就是说,在整个浏览器未关闭前,其数据一直都是存在的。sessionStorage也有length属性,其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点:

    • 页面刷新不会消除数据;
    • 只有在当前页面打开的链接,才可以访sessionStorage的数据;
    • 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;
  • 相关阅读:
    EntityFramework 启用迁移 EnableMigrations 报异常 "No context type was found in the assembly"
    JAVA 访问FTP服务器示例(2)
    NuGet Package Manager 更新错误解决办法
    JAVA 访问FTP服务器示例(1)
    RemoteAttribute 的使用问题
    诡异的 javascript 变量
    javascript apply用法
    Babun 中文乱码
    GSM呼叫过程
    转站博客园
  • 原文地址:https://www.cnblogs.com/java-ty/p/13695977.html
Copyright © 2011-2022 走看看