html5存储localstorage三剑客

最新推荐文章于 2022-07-13 15:52:48 发布

zmmsdk15225185085

最新推荐文章于 2022-07-13 15:52:48 发布

阅读量138

点赞数

分类专栏：本地存储

本文链接：https://blog.csdn.net/zmmsdk/article/details/103322924

版权

本地存储专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本地存储localstorage

两个方法

	// localSortage对象：把数据以字符串的方式保存本地
	// 获取： localStorage.getItem()
	// 设置： localStorage.setItem()

案例

// 获取元素
var txt = document.getElementById(‘txt’);
var a = document.querySelector(‘a’);
a.onclick = function () {
// 获取用户内容
var val = txt.value;
// 设置
localStorage.setItem(‘userName’, val);
}
设置
// localStorage.setItem(键，值)
// localStorage.setItem(‘uname’, ‘张三丰’);
// localStorage.setItem(‘age’, 22);
// localStorage.setItem(‘uname’, ‘李寻欢’);
获取
// 获取：localStorage.getItem(键)
// var n = localStorage.getItem(‘uname’);
// console.log(n);

本地离线存储 localStorage和sessionStorage 有什么区别

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除

HTML5中的本地存储概念是什么？生命周期有多长？

使用场景

	标签之间的通信和购物车这两块都会用到本地存储
	答：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，
HTML5规范则提出解决方案。HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。
	答：cookies兼容所有的浏览器，Html5提供的storage存储方式。
	①　Document.cookie
	②　Window.localstorage
	③　Window.sessionstorage
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie sessionStorage localStorage的区别

存储大小限制也不同，

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，sessionStorage约5M、localStorage约20M

数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。

数组转JSON字符串

	  str = JSON.stringify(arr);

JSON字符串转数组

	var arr = JSON.parse(str);

谈谈Cookie的弊端

	a. 每个特定的域名下最多生成的cookie个数有限制
	b. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
	c. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
	d. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

浏览器本地存储

	在HTML5中提供了sessionStorage和localStorage
	sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
	localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

	a. Cookie的大小是受限的
	b. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
	c. cookie还需要指定作用域，不可以跨域调用
	d. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
	e. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
	f. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage
关于本地存储和会话存储
常用浏览器存储方案有，cookie，session，localstorage，sessionstroage

cookie

	cookie 本身不是用来做服务器端存储的，它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 cookie。但是 cookie 也具备浏览器端存储的能力（例如记住用户名和密码，也就是常用的登录功能），因此就被开发者用上了。
	cookie前端的用法，获取的时候
		document.cookie
	设置的时候
		使用起来也非常简单，document.cookie = ....即可。
	document.cookie = 'key' +'='+value;
封装了一个方法用来直接获取cookie的值

		 function getCookie(name) { //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
  console.log(arr);
  return unescape(arr[2]);
}
return null;
}

 var cookieData=getCookie('token'); //cookie赋值给变量。
cookie后台的用法
	cookies设置值的时候是res.cookie(key,value);
	获取值的时候req.cookies.key;

cookie 致命的缺点：

	{credentials: 'include'}//储存的时候需要在fetch请求上加上这句话，feitch默认的是拒绝cookies
	所有 HTTP 请求都带着，会影响获取资源的效率
	API 简单，需要封装才能用
	所有的api请求都会携带cookie，所以cookie不太安全，使用的时候一般都需要做加密处理
	存储量太小，只有 4KB

session

	在Session被创建之后，就可以调用Session相关的方法往Session中增加内容了，而这些内容只会保存在服务器中，发到客户端的只有Session id；当客户端再次发送请求的时候，会将这个Session id带上，服务器接受到请求之后就会依据Session id找到相应的Session，从而再次使用之。正式这样一个过程，用户的状态也就得以保持了。
	在使用session的时候我们一般都保存一些临时数据，常见的需求一般就是获取验证码
	session是服务端的会话存储技术，他的生存周期只是保持在浏览器打开，浏览器关闭这个阶段之中

locationStorage 和 sessionStorage

	后来，HTML5 标准就带来了sessionStorage和localStorage，先拿localStorage来说，它是专门为了浏览器端缓存而设计的。其优点有：

存储量增大到 5MB API 适用于数据存储 localStorage.setItem(key, value)
localStorage.getItem(key) sessionStorage的区别就在于它是根据 session
过去时间而实现，而localStorage会永久有效，应用场景不同。例如，一些需要及时失效的重要信息放在sessionStorage中，一些不重要但是不经常设置的信息，放在localStorage中。

sessionstroage有个致命的缺点

就是无法多标签页共享，cookie可以多标签共享和设置过期时间不会带到
HTTP 请求中
Generator async promise这三个api都是es6新增api，也都可以理解为异步的解决方案，但是他们的适用场景不一样
关于异步处理：Generator async promise 的区别

zmmsdk15225185085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5存储localstorage三剑客

本地存储localstorage两个方法 // localSortage对象：把数据以字符串的方式保存本地 // 获取： localStorage.getItem() // 设置： localStorage.setItem()案例// 获取元素var txt = document.getElementById(‘txt’);var a = document.querySelect...
复制链接

扫一扫