localStorage & cookie

最新推荐文章于 2024-04-29 10:39:55 发布

qinjing1225

最新推荐文章于 2024-04-29 10:39:55 发布

阅读量143

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/qinjing1225/article/details/104501142

版权

Js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. localStorage 本地存储

全局的对象
localStorage
对本地存储的操作（类似于操作数据库，类似于操作DOM）
增删改查
ie7以上支持
标准浏览器
localStorage
设置：
localStorage.setItem(key,value);
获取：
localStorage.getItem(key) || null
删除：
localStorage.removeItem(key);
localStorage.clear();清除所有localStorage
注意：存的是文本，如果存数组，对象，转成字符串

storage事件

例子1:
    localStorage.setItem('hello','world')//存入形式：hello  world
    localStorage.setItem('num','123')//存入形式：num  123

    let obj = {'hello':'world'};
    localStorage.setItem('data',obj);//存入形式：[object Object]
    localStorage.setItem('data',JSON.stringify(obj));//用json转变之后：key = data value = {"hello":"world"}

    let arr = [1,2,3]
    add.onclick = function (){
        arr.push(1000000);
        localStorage.setItem('data2',arr);//1,2,3,1000000
        localStorage.setItem('data2',JSON.stringify(arr));//用json转变之后：key = data2 value = [1,2,3,1000000]
    };

实例1:购物车添加商品(不同窗口，同一个页面)
    <body>
		<h2>商品</h2>
		<div id="box">
			<span>鼠标</span>
			<span>键盘</span>
			<span>mac电脑</span>
			<span>耳机</span>
		</div>
		<hr>
		<h2>购物车</h2>
		<hr>
		<ul id="list">
			<!-- <li>11</li> -->
		</ul>


		<script>

		

		window.addEventListener('storage',function (){
			console.log('我改变了数据');
			// 触发这个事件的时候，拿到另外窗口添加到localStorage中的数据

			let data = localStorage.getItem('shop');  //[]
			// 把data转成数组 JSON.parse()
			let dataArr = JSON.parse(data);
			// 3. 更新值
			arr = dataArr;  // 当触发了storage说名有新数据，所以更新一下

			let html = dataArr.map((item) => {
				return `<li>${item}</li>`
			})

			list.innerHTML = html.join("");
		});

		let spans = box.getElementsByTagName("span");
		let list = document.getElementById('list');

		// 一进到页面中，先从localStorage中拿到数据，渲染在页面中

		let data = localStorage.getItem('shop');
		let dataArr = [];

		// 1. 先拿值

		// 如果数据存在是一个json的字符串
		if(data){
			// 把data转成数组 JSON.parse()
			dataArr = JSON.parse(data);

			let html = dataArr.map((item) => {
				return `<li>${item}</li>`
			})

			list.innerHTML = html.join("");
		}


		// arr初始值应该是从localStorage拿到的数组
		let arr = dataArr;  // 【键盘】

		for( var i = 0; i < spans.length; i++ ){
			spans[i].onclick = function (){

				arr.push(this.innerHTML)

				let newLi = `<li>${this.innerHTML}</li>`;
				list.innerHTML += newLi;

				// 放到localStorage中,每次存的时候不能是单独的一个值，而是一个数组
				//[1,2,3,4] = '1,2,3,4'
				// 2. 存值
				localStorage.setItem('shop',JSON.stringify(arr))
			};
		}

		</script>
	</body>

2. cookie 存储客户信息

http无状态的,使用cookie来记录登录状态，这个时候你在一个页面登录了，在同源下其他的页面也登陆了
document.cookie
可读可写
存cookie：document.cookie = “key=value”;
取cookie：document.cookie

cookie是跟域名有关系的，不同域名不能共享cookie
当关闭浏览器的时候，cookie会自动清除；即cookie的生命周期，只有会话时间，浏览器会话结束，就删除。要保存cookie不清除，要设置过期时间；
cookie大小有限制，浏览器不同设置的大小不同，在kb之前；
4.设置cookie的过期时间，expires设置过期时间需要转为UTC 世界标准时间，调用toUTCString()方法即可；

例子1:
        document.cookie = 'hello1=world1'
        document.cookie = 'hello2=world2'
        document.cookie = 'hello3=world3'
        let d = new Date();
        //往当前时间推迟1分钟
        d.setMinutes(d.getMinutes()+1)
        //设置cookie的过期时间
        document.cookie = 'test=123; expires='+d.toUTCString()
        //document.cookie的格式：hello1=world1; hello2=world2;
        //中间以一个分号和一个空格间隔开，键值以 = 相连接
        console.log(document.cookie);//hello1=world1; hello2=world2;  hello3=world3; test=123;
        //当在一分钟之内关闭浏览器，再打开时，cookie中只保存了test:123,一分钟后test：123也被清除；

cookie方法封装：
        function setCookie(key,value,n){
			// n为0，已经设置了过期时间，设置cookie的那一刻是过期时间，停留一下就过期了
			if(n){
				let d = new Date();
				d.setDate(d.getDate()+n);
				document.cookie = key+'='+value+"; expires="+d.toUTCString();
			}else{
				document.cookie = key+'='+value;
			}
		}

		function getCookie(key){
			let cookies = document.cookie;
			cookies = cookies.split('; ');
			for( var i = 0; i < cookies.length; i++ ){
				let arr = cookies[i].split('=');
				if(arr[0] === key){
					return arr[1];
				}
			}
		}

		function removeCookie(key){
			//删除cookie
			setCookie(key,null,-1)	
		}

qinjing1225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
localStorage & cookie

1. localStorage 本地存储全局的对象localStorage对本地存储的操作（类似于操作数据库，类似于操作DOM）增删改查ie7以上支持标准浏览器localStorage设置：localStorage.setItem(key,value);获取：localStorage.getItem(key) || null删除：localStorage.remov...
复制链接

扫一扫