H5本地存储—sessionStorage

用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。（ps：如果用户好不容易翻到了第几十、几百乃至几千条时，难道要用户再重头开始？可能这个时候跳出率就高了，这个分析的确挺有道理，无力反驳...）

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

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）
  实现思路:
  ①页面滚动，将滚动位置存到session中
  ②再次进到页面中，到session中取出上次保存的浏览位置
  ③滚动到对应位置

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

具体实例：

html：

<div>
    <input type="button" onclick="setItems()" value="存值">
    <input type="button" onclick="getItems()" value="取值">
    <input type="button" onclick="deleteItem()" value="删除">
</div>
<div>
    <input type="button" onclick="setItems1()" value="存值">
    <input type="button" onclick="getItems1()" value="取值">
    <input type="button" onclick="deleteItem1()" value="删除">
</div>

js:

<script>
    // localStorage 存值永久有效
    function setItems(){
        var user = {};
        user.name = 'liu jp';
        user.age = 18;
        user.home = 'China';
        localStorage.setItem('userinfo',JSON.stringify(user));
    }

    // localStorage 取值
    function getItems(){
        var data = JSON.parse(localStorage.getItem('userinfo'));
        console.log('name:'+data.name+'\r age:'+data.age+'\r home:'+data.home);
    }

    // localStorage 删除指定键对应的值
    function deleteItem(){
        localStorage.removeItem('userinfo');
        console.log(localStorage.getItem('userinfo'));
    }

    // sessionStorage 存值当前有效
    function setItems1(){
        var user = {};
        user.name = 'zz';
        user.age = 18;
        user.home = 'China';
        sessionStorage.setItem('userinfo',JSON.stringify(user));
    }

    // sessionStorage 取值
    function getItems1(){
        var data = JSON.parse(sessionStorage.getItem('userinfo'));
        console.log('name:'+data.name+'\r age:'+data.age+'\r home:'+data.home);
    }

    // sessionStorage 删除指定键对应的值
    function deleteItem1(){
        sessionStorage.removeItem('userinfo');
        console.log(sessionStorage.getItem('userinfo'));
    }
</script>

最终取值

想在本地实现效果，可以 点击下载实例代码

此篇文章学习来源，查看原文