存储数据

1.cookie。设置属性不会被覆盖

特点：内存小只有4kb，可以设置过期时间。而且有些域名会限制

网站里面查找cookie：1.检查 2.Application 3.cookies

或者：点击网页最上面小锁。点击使用了多少条cookie

//一条一条的设置
document.cookie = "name=xinxin"; //设置
document.cookie //查看document.cookie = "sex=男";
document.cookie

//一次多条设置,多个之间用逗号隔开
document.cookie = "name=xinxin,age=18"
documentcookie

应用范围：只在当前会话期间存在的cookie

永远存在的cookie

存在特定时长的cookie

特定时间点之后失效的cookie

//封装cookie.按天为过期单位
function setCookie(name,value,day){let date = new Date() //获取时间date.setDate(date.getDate() + day)//设置一个时间(现在时间加上一个时间)let expires = date.toGMTString() //过期时间document.cookie = `${name} = ${value},expires = ${exprise}`
}
setCookie("name","xinxin",2)//获取cookie.通过传入的属性名，获取到属性值
function getCookie(name){//获取到所有的cookie,会以字符串形式展现出来let cookies = document.cookie//把cookie用split把字符串拆分为数组let cookieArr = cookies.split(";")//遍历数组，通过判断属性名是否与传入的属性名一致，要是一致就把属性值return出来.这时cookie数组里面为["age=18","sex=nan"]的形式for(let i=0;i<cookieArr.length;i++){//把数组属性名和属性值通过split拆分成["age","18"]的形式let cookie = cookieArr[i].split("=")if(name === cookie[0].trim()){return cookie[1]}}
}
getCookie("name"); //xinxin
getCookie("age");  //18//删除cookie (把它的过期时间设置为-1).因为过期时间不能小于当前时间。
function removeCookie(name,value,day){setCookie(name.value.-1)
}
removeCookie(name,value,day)

//设置过期时间
document.cookie = "name=xinxin,exprise=Tue Jun 30 2020 18:20:59 GMT+0800"

# web存储1.localStorage(永久存储)。设置 相同属性会被覆盖.在一个浏览器中设置的，在别的页面也保存了下来特点：只要用户不手动删除，则会永久保存，可以多条数据```js
let localStorage = window.localStorage;
//设置 相同属性会被覆盖
localStorage.setItem("age","18")
//获取
localStorage.getItem("age")
//删除
localStorage.removeTtem("age")
//删除所有
localStorage.clear()

//json模式下的设置与获取
let localStorage = window.localStorage;
//存info .里面存个数组，使用JSON.srtingify（）把括号里的东西转换为字符串
localStorage.setItem('info',JSON.srtingify({"name":"xinxin"},{"age":18}))
//JSON.parse()把里面东西转换为数组
let info = JSON.parse(localStorage.getItem('info'))

2.sessionStorage（会话存储）

特点：关闭会话框就会清除数据。适合客服业务逻辑

API与localStorage一致

let sessionStorage = window.sessionStorage;
//设置
sessionStorage.setItem("age","18")
//获取
sessionStorage.getItem("age")
//删除
sessionStorage.removeItem("age")
//删除所有
sessionStorage.clear()

本地存储(cookie)优缺点

优点：1.可以直接访问数据

2.节省网络流量

3.减轻服务器的压力

4.数据存储在本地，使之创建完全离线的应用程序更加可行
5.可以设置过期时间
6.因为存储在客户端，所以存储不安全

缺点：1.没有任何同步支持，拿不到最新的数据。

2.存储设置模糊
3.大小4kb,
#web存储（storage）存储在服务器
localhost:永久存储。大小5m，有对应api 。除非用户手动删除
sessionstorage:会话存储，比较安全，当关闭网页存储的数据就会消失。

js存储数据cookie,localhost,sessionstorage相关推荐

前端的存储技术cookie、sessionStorage、localStorage
HTTP无状态协议是指协议对于事务处理没有记忆能力. 会话跟踪协议的状态是指下一次传输可以"记住"这次传输信息的能力,无状态是指同一个会话(注意什么叫同一个会话) 的连续两个请求 ...
计算机浏览器存储技术cookie、sessionStorage、localStorage
HTTP无状态协议是指协议对于事务处理没有记忆能力. 会话跟踪协议的状态是指下一次传输可以"记住"这次传输信息的能力,无状态是指同一个会话(注意什么叫同一个会话) 的连续两个请求 ...
浏览器本地存储（cookie、sessionStorage和localStorage）
1.Cookie 特点:存储大小4KB左右:可设置失效时间:通信时会携带在HTTP头中,使用cookie保存过多数据会影响性能. 注意:cookie的跨域可以理解为跨域名,只要二级域名相同,不涉及到端 ...
一文读懂cookie、sessionStorage和localStorage的区别
cookie.sessionStorage和localStorage的区别 cookie 什么是cookie? cookie的构成 cookie的特点 Cookie并不提供修改.删除操作封装setC ...
web存储机制localStorage和sessionStorage
https://www.cnblogs.com/yaoyuqian/p/7901052.html web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别, ...
SSM 实训笔记 -10- 使用 sessionStorage 存储数据、js 图片验证码、登录加载动画
SSM 实训笔记 -10- 使用 sessionStorage 存储数据.js 图片验证码.登录加载动画本篇内容: (1)在登录成功时,使用 sessionStorage 存储用户的用户名,并在登录 ...
本地存储-cookie|localStorage|sessionStorage|indexedDB
本地存储本地存储 cookie 如何工作问题 cookie标准限制属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...
Web数据存储之localStorage和sessionStorage
Web数据存储之localStorage和sessionStorage 学习前端以来,自己了解有localStorage和sessionStorage的相关存储的知识,也有实践过,但是之前只限于能用的 ...
各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别
cookie 存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销:但如果这些数据是每个请求都需 ...

js存储数据cookie,localhost,sessionstorage

存储数据

本地存储(cookie)优缺点

js存储数据cookie,localhost,sessionstorage相关推荐

最新文章

热门文章