HTML5 web 存储

简介：

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

首先我们先了解一下：　

• 什么是 HTML5 Web 存储?

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

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

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

localStorage 和 sessionStorage

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

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）

了解完sessionStorage之后是不是很符合我们的需求呢？将数据存到 session中，管你前进后退还是刷新，数据依然在，关闭窗口后再进页面才会清空数据！！！

再理一下实现思路，

1. 页面滚动，将滚动位置存到session中
2. 再次进到页面中，到session中取出上次保存的浏览位置
3. 滚动到对应位置

　　这里只介绍setItem和getItem，当然还有什么removeItem删除、key、clear清除所有的key/value操作。

setItem存储value

• 用途：将value存储到key字段
• 用法：.setItem( key, value)

代码示例：

sessionStorage.setItem("key", "value"); 

localStorage.setItem("site", "js8.in");

getItem获取value

• 用途：获取指定key本地存储的值
• 用法：.getItem(key) 代码示例：

var value = sessionStorage.getItem("key"); 

var site = localStorage.getItem("site");

例子： 先看效果图：

//滚动时保存滚动位置
document.addEventListener('DOMContentLoaded',function(){
  // scroll的节点是body;
  var body = document.body;
  body.onscroll = function(){
    //存储的滚动高度
    var storage_scrollTop = body.scrollTop;
    if(storage_scrollTop!=0) {
      sessionStorage.setItem('storage_scrollTop',storage_scrollTop);
    }
  }
},false);

//onload时，取出并滚动到上次保存位置
window.onload = function() {　　
  var body = document.body;
  //当前获取存储的滚动高度
  var current_scrollTop = sessionStorage.getItem("storage_scrollTop");　
  if(current_scrollTop){
    console.log(body.scrollTop)
    body.scrollTop = current_scrollTop;
  }　
};

如果使用window.onload 事件上存在一个问题，如果页面是异步加载，那么很多节点是动态，页面高度在window.onload加载完了是可继续变化。