localStorage

H5 Web存储(在客户端存储数据)

HTML5 提供了两种在客户端存储数据的新方法:

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

之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

什么是localStoragesessionStorage

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),`localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

localStorage自带方法

名称 作用
clear 清空localStorage上存储的数据
getItem 读取数据
hasOwnProperty 检查localStorage上是否保存了变量x,需要传入x
key 读取第i个数据的名字或称为键值(从0开始计数)
length localStorage存储变量的个数
propertyIsEnumerable 用来检测属性是否属于某个对象的
removeItem 删除某个具体变量
setItem 存储数据
toLocaleString 将(数组)转为本地字符串
valueOf 获取所有存储的数据

:如何创建和访问localStorage

  1. <script type="text/javascript">
  2. localStorage.lastname="Smith"//创建一个名为lastname的变量
  3. document.write(localStorage.lastname)
  4. </script>

:对用户访问页面的次数进行计数

  1. <script type="text/javascript">
  2. if (localStorage.pagecount)
  3. {
  4. localStorage.pagecount=Number(localStorage.pagecount) +1;
  5. }
  6. else
  7. {
  8. localStorage.pagecount=1;
  9. }
  10. document.write("Visits "+ localStorage.pagecount + " time(s).");
  11. </script>

localStorage的常用写法

  1. localStorage.a = 3;//设置a为"3"
  2. localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
  3. localStorage.setItem("b","isaac");//设置b为"isaac"
  4. var a1 = localStorage["a"];//获取a的值
  5. var a2 = localStorage.a;//获取a的值
  6. var b = localStorage.getItem("b");//获取b的值
  7. localStorage.removeItem("c");//清除c的值