<!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")))

快速理解webStroage的更多相关文章

  1. 【转】快速理解Kafka分布式消息队列框架

     from:http://blog.csdn.net/colorant/article/details/12081909 快速理解Kafka分布式消息队列框架 标签: kafkamessage que ...

  2. Spark机器学习 Day2 快速理解机器学习

    Spark机器学习 Day2 快速理解机器学习 有两个问题: 机器学习到底是什么. 大数据机器学习到底是什么. 机器学习到底是什么 人正常思维的过程是根据历史经验得出一定的规律,然后在当前情况下根据这 ...

  3. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  4. 快速理解高性能HTTP服务端的负载均衡技术原理(转)

    1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...

  5. 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  6. 字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8

    原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...

  7. [转帖]十分钟快速理解DPI和PPI，不再傻傻分不清！

    十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...

  8. 快速理解VirtualBox的四种网络连接方式

    VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实他跟VMWare 的网络连接方式都是 ...

  9. 深入浅出 1 - AI量化策略快速理解

      我们在用AI来编写量化策略过程中,主要用到了机器学习,先来从一张图直观理解什么是机器学习:人类对新问题做出有效决策依靠的是过去积累的许多经验,并对经验进行利用,而对机器来说,“经验”以“数据”方式 ...

随机推荐

  1. AndroidAnnotations部署

    环境: 系统:windows 8 (64bit) 开发工具:Eclipse 3.8 JDK版本:jdk1.6 构建工具:Ant(Eclipse默认的build tool) androidannotat ...

  2. CAS分析——Core

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  3. Windows性能计数器--磁盘性能分析Disk

    Physical Disk: 单次IO大小 Avg.Disk Bytes/Read Avg.Disk Bytes/Write IO响应时间 Avg.Disk sec/Read Avg.Disk sec ...

  4. 基于Linux系统的病毒

    虽然在Linux里传播的病毒不多,但也是存在一些,我从一些安全网站搜集了一些资料. 1.病毒名称: Linux.Slapper.Worm 类别: 蠕虫 病毒资料: 感染系统:Linux 不受影响系统: ...

  5. careercup-数学与概率 7.5

    7.5 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 解法: 要将两个正方形对半分,这条线必须连接两个正方形的中心点.利用slope=(y1 ...

  6. MVC - 基础

    什么是MVC模式 传统的WebForm发展到如今出现不少的缺陷 比如为了解决Http的无状态 WebForm模式使用了ViewState来保存客户端和服务端数据 过量的使用则会造成页面臃肿不堪 大量服 ...

  7. cocos2dx下最大纹理大小取决于平台

    原文:http://www.cocos2d-x.org/wiki/Max_size_of_textures_in_cocos2d-x_depends_on_each_platform 在理论上,coc ...

  8. c# 枚举基础有[flags]和没有的的区别

    枚举提供成组的常数值,它们有助于使成员成为强类型以及提高代码的可读性.在 C# 中,使用 enum 来声明枚举. 枚举分为简单枚举和标志枚举两种. 基本语法示例 enum Day { Sun, Mon ...

  9. Amazon EC2上搭建VPN服务器

    Amazon EC2 提供了一年免费试用,Micro Instance,配置是 1G 内存,共享 CPU,和每月 15G 的流量.搭一个 VPN 服务器绰绰有余了.操作系统我选的是 Amazon Li ...

  10. ThinkPHP函数详解：R方法

    R方法用于调用某个控制器的操作方法,是A方法的进一步增强和补充.关于A方法的用法见这里.R方法的调用格式:R('[项目://][分组/]模块/操作','参数','控制器层名称') 例如,我们定义了一个 ...