javaScript之本地存储

最新推荐文章于 2024-05-08 17:57:05 发布

无区新手

最新推荐文章于 2024-05-08 17:57:05 发布

阅读量177

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40660787/article/details/105179839

版权

JavaScript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

Pink老师整理

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用

sessionStorage.setItem(key, value)        //存储数据

sessionStorage.getItem(key)                //获取数据

sessionStorage.removeItem(key)        //删除数据

sessionStorage.clear()        //删除所有数据

window.localStorage

声明周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

localStorage.setItem(key, value)        //存储数据

localStorage.getItem(key)                //获取数据

localStorage.removeItem(key)        //删除数据

localStorage.clear()        //删除所有数据

当想存储对象类型数据时，要使用JSON.stringify()进行转换成字符串类型数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <script>
        var todolist = [{
            title: '我今天吃八个馒头',
            done: false
        }, {
            title: '我今天学习jq',
            done: false
        }, ];
        // localStorage.setItem("todo", todolist);
        // 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
        localStorage.setItem("todo", JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        // console.log(typeof data);
        // console.log(data[0].title);
        // 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(data[0].title);
    </script>
</body>

</html>

记住用户名案例

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>

	<body>
		<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
		<script>
			var username = document.querySelector('#username');
			var remember = document.querySelector('#remember');
			remember.addEventListener('change', function() {
				if (this.checked) {
					localStorage.setItem('uname', username.value);
				} else {
					localStorage.removeItem('uname');
				}
			});
			if (localStorage.getItem('uname')) {
				username.value = localStorage.getItem('uname');
				remember.checked = true;
			}
		</script>
	</body>

无区新手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript之本地存储

Pink老师整理随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M 只能存储字符串，可以将对象J...
复制链接

扫一扫