HTML5的web 存储localStorage、sessionStorage

说明

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。我们可以使用localStorage、sessionStorage进行本地的存储。其它的还有WebSQL、IndexDB存储。

兼容性

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储，IE7及IE7之前都不支持web存储

特性

1、设置、读取方便、页面刷新不丢失数据
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储
4、取出JSON.stringify() 编码的数据，需要使用 JSON.parse()解析

sessionStorage

1、sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
2、浏览器页面关闭后，数据会丢失。就算页面重新打开，数据也不会恢复。
3、不能多个窗口共享

localStorage

1、localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
2、可以多窗口（页面）共享（同一浏览器可以共享）。
3、就算窗口关闭了，数据会暂时消失，当页面重新打开之后，数据就恢复了。

相关示例

这里演示的是sessionStorage，localStorage也是如此

<body>
        <input type="text" id="text">
    <button id="btn1">存储数据</button>
    <button id="btn2">获取数据</button>
    <button id="btn3">删除数据</button>
    <button id="btn4">获取某个key值</button>
</body>
<script>
    var text = document.getElementById('text')
    var btn1 = document.getElementById('btn1')
    var btn2 = document.getElementById('btn2')
    var btn3 = document.getElementById('btn3')
    var btn4 = document.getElementById('btn4')
        
    //存储数据
    var inp = ''
    btn1.onclick = function(){
        inp = text.value
        //存储数据
        sessionStorage.setItem('uname', inp)
    }
        
    //获取数据
    btn2.onclick = function(){
        //获取数据
        var uname = sessionStorage.getItem('uname')
        alert(uname)
    }
        
    //删除数据
    btn3.onclick = function(){

        //删除所有
        //sessionStorage.clear()
        sessionStorage.removeItem('uname')
    }
        
    //获取第 0 个索引的key值
    btn4.onclick = function(){

        var key = sessionStorage.key(0)
        alert(key)
    }

特殊

因为它们只能存储字符串，因此当要存储数组、对象等，需要使用JSON.stringify()编码后再存储，取值也需要使用JSON.parse()解析该字符串才能获取相应的数据。

//定义一个对象
var obj = {
    name: '车神-黄杰',
    age:23
}
        
//保存值
sessionStorage.setItem('info', JSON.stringify(obj))
//获取值
var info = JSON.parse(sessionStorage.getItem('info'))
//输出值
alert(info.name)

注意

因为有兼容性问题，因此在使用时根据自己的需要，判断是否存在兼容性问题，给出友好提示。

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
 
} else {
    // 抱歉! 不支持 web 存储。
}

HTML5的web 存储localStorage、sessionStorage

说明

兼容性

特性

sessionStorage

localStorage

相关API

相关示例

特殊

注意

猜你喜欢