您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
HTML5本地存储
点击数:1329  发布时间2018-07-15 16:35:37

H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL。不管是哪一个,都是基于JavaScript语言来使用.

1、概述:

对于Web Storage来说,实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过Cookie,没关系,看了这篇文章照样轻松玩转Web Storage。首先,学习Web Storage只需背熟这句口诀:“两个接口,四个函数”。

2、口诀:

(1)两个接口:分别是localStorage和sessonStorage

(2)四个函数:分别是setItem、getItem、removeItem和clear

3、localStorage:

(1)特性:

     域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立。

(2)四个函数:

     A. localStorage.setItem      存储数据信息到本地

     B. localStorage.getItem      读取本地存储的信息

     C. localStorage.removeItem   删除本地存储的信息

     D. localStorage.clear        清空所以存储的信息
    
 4、sessonStorage:

 (1)特性:

      会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。

 (2)四个函数:

      A. sessionStorage.setItem       存储数据信息到本地

      B. sessionStorage.getItem       读取本地存储的信息

      C. sessionStorage.removeItem    删除本地存储的信息

      D. sessionStorage.clear         清空所以存储的信息
     
5、四个函数的用法:

(1)localStorage.setItem(键名,键值)

         在本地客户端存储一个字符串类型的数据,其中,第一个参数“键名”代表了该数据的标识符,而第二个参数“键值”为该数据本身。如:

                 localStorage.setItem("coffeeType", "mocha");      //存储键名为coffeeType和键值为mocha的数据到本地
                 localStorage.setItem("coffeePrice", "28");        //有了上一句做参考,这句意思你该理解了吧
     
(2)localStorage.getItem(键名)

         读取已存储在本地的数据,通过键名作为参数读取出对应键名的数据。如:

                 var data = localStorage.getItem("coffeeType");   //读取对应键名为coffeeType的数据

     
(3)localStorage.removeItem(键名)
         移除已存储在本地的数据,通过键名作为参数删除对应键名的数据。如:

                 localStorage.removeItem("coffeeType");           //从本地存储中移除键名为coffeeType的数据
     
(4)localStorage.clear()
         移除本地存储所有数据。如:

                 localStorage.clear();      //保存着的"coffeePrice/28"键/值对也被移除了,所有本地数据拜拜
   
(5)另外,sessionStorage中的四个函数与以上localStorage类的函数用法基本一致,就不再详解。


实例:

在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉!不支持 Web Storage ..
}

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
</script>

上例也可这样写:

// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;
删除 "lastname" localStorage 项目的语法如下:

localStorage.removeItem("lastname");
注释:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!

下面的例子对用户点击按钮的次数进行计数。在代码中,值字符串被转换为数值,依次对计数进行递增:

实例
if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";


来源:咸宁网站建设
【上一篇】JSON 数据格式
【下一篇】javascript数组去重