JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

最新推荐文章于 2022-05-04 10:00:41 发布

吗吗哈哈

最新推荐文章于 2022-05-04 10:00:41 发布

阅读量262

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44715697/article/details/108983400

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

来来来，JavaScript核心基础语句送给你们
 学JS你不会DOM算真的学会了吗？
对JavaScript中的事件进行疯狂处理
 用BOM来实现轮播图效果
 我们来实现创建JavaScript中的自定义对象
 JS中构造函数的原型prototype
还不明白JS中的内置对象吗？快来这里！
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

1. 简介

出于记录用户特定数据的目的，需要客户端数据存储技术

常用存储机制：

Cookie

优点：需要与服务器端交互、浏览器自动管理不同站点的数据并发送到服务器

缺点：安全性受限、数据量受限（4KB）、可用性受限、文明存储
Web Storage

HTML5新增，分为localStorage和sessionStorage

优点：操作简单、不会自动发送到服务器、存储空间大（浏览器可支持10MB以上）

缺点：安全性受限、永不过期、不区分站点、明文存储

2. Cookie

以键值对形式存储，在客户端通过document对象的cookies谁能够进行操作

写入Cookie

语法：document.cookie = "键=值;expires=失效事件的GMT格式字符串"

如果未指定expires，则浏览器关闭时cookie失效
读取Cookie

先通过document.cookie进行整体读取，然后再根据;分号和=等号进行拆分

<script>
	function writeCookie(){
		document.cookie = 'name = tom';
		document.cookie = 'sex = male';

		//指定失效时间
		var date = new Date();
		date.setDate(date.getDate()+7);
		document.cookie = 'age = 18;expires = '+date.toGMTString();
	}
	//读取Cookie
	function readCookie(){
		var data = document.cookie;
		var array = data.split(';');
		for(var item of array){
			var arr = item.split('=');
			console.log(arr[0],arr[1]);
		}
	}
</script>
<body>
	<button onclick="writeCookie()">写入Cookie</button>
	<button onclick="eradCookie()">读取Cookie</button>
</body>

3. WebStorage

（1）简介

WebStorage是HTML5引入的本地存储解决方案，可以再客户端本地存储数据

由两部分组成：

localStorage：在本地永久性存储数据
sessionStorage：存储的数据只在会话期间有效，关闭浏览器则会自动删除

（2）基本用法

localStorage和sessionStorage的用法相同，常用API

方法/属性	作用
`setItem(key,value)`	写入数据，添加修改键值对
`getIntem(key)`	读取数据，根据键值读取对应的值
`removeItem(key)`	删除数据，根据键删除对应的键值对
`key(index)`	根据索引获取对应的键
`clear()`	清空数据
`length`	获取键值对数量

注：WebStorage中只能存储字符串数据，如果要存储对象，需要先转换为字符串格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //写入WebStorage
        function writeStorage(){
            //存储到localStorage
            localStorage.setItem('name','alice');
            localStorage.setItem('sex','female');
            localStorage.setItem('name','tom'); //如果key已存在，则表示修改

            //存储到sessionStorage中
            sessionStorage.setItem('age',18);   //会话结束时失败，即关闭浏览器则自动删除
        }

        //读取WebStorage
        function readStorage(){
            console.log(localStorage.getItem('address'));      //如果存在，返回string类型
            console.log(localStorage.getItem('age'));   //如果不存在，则返回null

            console.log(sessionStorage.getItem('age'));
        }

        //删除WebStorage
        function removeStorage(){
            localStorage.removeItem('address');
        }

        //其他操作
        function doOther(){
            //根据索引来获取key
            console.log(localStorage.key(1));

            //清空数据
            localStorage.clear();

            //获取键值对的数量
            console.log(localStorage.length);

            //WebStorage中只能存储字符串数据，如果要存储对象，需要先转化为字符串格式
            var stu = {
                id:'24',
                name:'科比',
                age:18
            };

            //1.将对象转换为字符串，然后存入
            localStorage.setItem('stu',JSON.stringify(stu));

            //2.将读取的字符串转换为JSON对象
            var str = localStorage.getItem('stu');
            var obj = JSON.parse(str);
            console.log(obj.name,obj.age);

            //对象数组
            var stus = [
                {
                    id:'24',
                    name:'科比',
                    age:18
                },
                {
                    id:'23',
                    name:'乔丹',
                    age:18
                },
                {
                    id:'6',
                    name:'韦德',
                    age:18
                }
            ];

            localStorage.setItem('stus',JSON.stringify(stus));
            var array = JSON.parse(localStorage.getItem('stus'));
            console.log(array);
        }
    </script>
</head>
<body>
    <button onclick="writeStorage()">写入WebStorage</button>
    <button onclick="readStorage()">读取WebStorage</button>
    <button onclick="removeStorage()">删除WebStorage</button>
    <button onclick="doOther()">其他操作</button>
</body>
</html>

（3）事件监听

监听WebStorage中数据的变化，当数据繁盛变化时触发执行回调函数

语法：window.addEventListener("storage",回调函数)

storage事件，对localStorage和sessionStorage中的数据进行监听
回调函数，接收一个StorageEvent类型的事件对象参数，包括：

key 发生变化的键
oldValue 原值
newValue 新值
storageArea 发生变化的localStorage或sessionStorage对象
url 引发变化的页面的URL

window.addEventListener('storage',function(e){
	console.log(e);
});

吗吗哈哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

1. 简介出于记录用户特定数据的目的，需要客户端数据存储技术常用存储机制：Cookie优点：需要与服务器端交互、浏览器自动管理不同站点的数据并发送到服务器缺点：安全性受限、数据量受限（4KB）、可用性受限、文明存储Web StorageHTML5新增，分为localStorage和sessionStorage优点：操作简单、不会自动发送到服务器、存储空间大（浏览器可支持10MB以上）缺点：安全性受限、永不过期、不区分站点、明文存储2. Cookie以键值对形式存储，在客户端
复制链接

扫一扫