localStorage和sessionStorage用法总结及其区别


html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。


sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。只允许同一窗口访问。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
    //setItem存储value
    localStorage.setItem("name", "徐同保");
    localStorage.setItem("job", "web前端");

    //getItem获取value
    var name = localStorage.getItem('name');
    var job = localStorage.getItem('job');
    console.log('姓名：' + name);
    console.log('职业：' + job);

    //removeItem删除key
    localStorage.removeItem('name');
    var name = localStorage.getItem('name');
    var job = localStorage.getItem('job');
    console.log('姓名：' + name);
    console.log('职业：' + job);

    //clear清除所有的key/value
    localStorage.clear();
    localStorage.removeItem('name');
    var name = localStorage.getItem('name');
    var job = localStorage.getItem('job');
    console.log('姓名：' + name);
    console.log('职业：' + job);
</script>
</body>
</html>


浏览器支持情况：



chrome查看方式



posted @ 2017-09-20 15:09  徐同保  阅读(6501)  评论(0)  编辑  收藏  举报