• 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、就算窗口关闭了,数据会暂时消失,当页面重新打开之后,数据就恢复了。

    相关API

    它们都具有相同的方法
    1、setItem(key, value) 设置存储内容
    2、getItem(key) 读取存储内容
    3、removeItem(key) 删除键值为key的存储内容
    4、clear() 清空所有存储内容
    5、key(index) 得到某个索引的key值

    相关示例

    这里演示的是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 存储。
    }
    
  • 相关阅读:
    Gin框架介绍与使用
    Go并发编程(goroutine)
    Go语言操作数据库及其常规操作
    Julia语言程序基础
    GoLang字符串处理
    在PHP7以上版本使用不了mysql扩展
    Docker基础命令
    Odoo14_Tree视图自定义按钮和自定义面板
    Odoo13_自定义客户端页面
    python_读取.xlsx(电子表格)文件
  • 原文地址:https://www.cnblogs.com/HJ412/p/10930226.html
Copyright © 2020-2023  润新知