HTML进阶之存储

最新推荐文章于 2024-07-20 14:31:44 发布

青春如我

最新推荐文章于 2024-07-20 14:31:44 发布

阅读量128

点赞数

分类专栏： HTML

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

IocalStorage与sessionStorage

转载自:10-HTML5详解（三）

区别与联系

时效性不同，localStorage存储会持久化，sessionStorage存储会在网页会话后失效
存储容量不同，localStorage一般在20Mb左右，seesionStorage约为5Mb
存储类型，两者都仅能存储字符串，注意存储的时候进行类型转换,可以将对象JSON.stringfy()编码后存储

常用API

设置存储内容：

	setItem(key, value);

PS：可以新增一个 item，也可以更新一个 item。

读取存储内容：

	getItem(key);

根据键，删除存储内容：

	removeItem(key);

清空所有存储内容：

	clear();

根据索引值来获取存储内容：

	key(n);

用法小总结:

更多用法总结

sessionStorage 的 API 举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button>sesssionStorage存储</button>
<button>sesssionStorage获取</button>
<button>sesssionStorage更新</button>
<button>sesssionStorage删除</button>
<button>sesssionStorage清除</button>
<script>

    //在h5中提供两种web存储方式

    // sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
    // localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上

    var txt = document.querySelector('input');

    var btns = document.querySelectorAll('button');
    //        sessionStorage存储数据
    btns[0].onclick = function () {
        window.sessionStorage.setItem('userName', txt.value);
        window.sessionStorage.setItem('pwd', '123456');
        window.sessionStorage.setItem('age', 18);
    }

    //        sessionStorage获取数据
    btns[1].onclick = function () {
        txt.value = window.sessionStorage.getItem('userName');
    }

    //        sessionStorage更新数据
    btns[2].onclick = function () {
        window.sessionStorage.setItem('userName', txt.value);
    }

    //        sessionStorage删除数据
    btns[3].onclick = function () {
        window.sessionStorage.removeItem('userName');
    }

    //        sessionStorage清空数据
    btns[4].onclick = function () {
        window.sessionStorage.clear();
    }
</script>
</body>
</html>

效果如下：

如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。

localStorage 的 API 举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>

<script>

    /*
    *  localStorage
    *  数据存在硬盘上
    *  永久生效
    *  20M
    * */

    var txt = document.querySelector('input');
    var btns = document.querySelectorAll('button');

    //        localStorage存储数据
    btns[0].onclick = function () {
        window.localStorage.setItem('userName', txt.value);
    }

    //        localStorage存储数据
    btns[1].onclick = function () {
        txt.value = window.localStorage.getItem('userName');
    }

    //        localStorage删除数据
    btns[3].onclick = function () {
        window.localStorage.removeItem('userName');
    }

</script>
</body>
</html>

综合案例–记住用户和密码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>记住用户名和密码</title>
</head>
<body>
	<label for="">
		用户名:<input type="text" class="username">
	</label>
	<label for="">
		密码: <input type="password" class="password">
	</label>
	<label for="">
		<input type="checkbox" class="check">记住密码
	</label>
	<label for="">
		<button>登录</button>
	</label>
	<script>
		var username=document.querySelector(".username");
		var pwd=document.querySelector(".password");
		var check=document.querySelector(".check");
		var btn=document.querySelector("button");

		//点击记住密码按钮，则将数据存在locatStorage,反之则清除
		btn.onclick=function(){
			// console.log(username.value);
			// console.log(pwd.value);
			if(check.checked){
				window.localStorage.setItem('username',username.value);
				window.localStorage.setItem('password',pwd.value);
			}else{
				window.localStorage.removeItem('username');
				window.localStorage.removeItem('password');
			}
		}
		//如有本地存储有密码，则先加载进来
		window.onload=function(){
			username.value=window.localStorage.getItem('username');
			pwd.value=window.localStorage.getItem('password');
		}
	</script>
</body>
</html>

附:

1. cookie、localStorage、sessionStorage的区别

cookie是什么？
用于客户端和服务器端的通信。
可以参考我之前的一篇博客cookie和session
cookie的缺点
存储量太小，只有4kb
所有http请求都带着，会影响获取资源的效率
api简单，需要封装才能用。

总结：在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了，就开始用后面的两个做本地存储。

青春如我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML进阶之存储

IocalStorage与sessionStorage区别与联系时效性不同，localStorage存储会持久化，sessionStorage存储会在网页会话后失效存储容量不同，localStorage一般在2-5Mb左右，seesionStorage存储容量依据浏览器的不同而不同存储类型，两者都仅能存储字符串，注意存储的时候进行类型转换cookie、localStorage、ses...
复制链接

扫一扫

专栏目录