4.1 JavaScript-数据持久化

数据持久化：吧数据长久的保存在硬盘数据区中

webStorage

不同的浏览器直接无法相互使用webStorage数据，最大使用空间位5MB

SessionStroage会话级存储

作用：可将数据临时保存至硬盘中，关闭页面保存的数据消失
储存数据
参数1:存储的key
参数2:存储的value
sessionStorage.setItem("参数1", "参数2")
若key存在就修改value数据，不存在则添加数据

查询数据
参数1:存储的key
var value = sessionStorage.getItem("参数1");
删除数据
参数1:存储的key
var value = sessionStorage.removeItem("参数1")

localStorage本地级存储

作用：可将数据永久保存至硬盘中，关闭页面保存的数据不会消失
储存数据
参数1:存储的key
参数2:存储的value
localStorage.setItem("参数1", "参数2")
若key存在就修改value数据，不存在则添加数据

查询数据
参数1:存储的key
var value = localStorage.getItem("参数1");
删除数据
参数1:存储的key
var value = localStorage.removeItem("参数1")

cookie

cookie是数据持久化操作的一种形式
cookie是由服务器设置客户端接收的数据
cookie的作用是为了服务器记录客户端链接的信息如登录内容效验等
cookie分为会话级和本地级
-会话级cookie 临时保存，当页面关闭后，cookie自动删除
-本地级cookie 会根据时效性保存cookie，当时效性过期后cookie自动删除

查看cookie

获得当前页面设置的所有cookie信息所有的cookie以字符串的形式展示
console.log(document.cookie)

设置cookie 会话级cookie

document.cookie ="name=zhangsan" document.cookie ="age=18"

设置cookie 本地级cookie expires 日期 max-age 秒数

var nowDate =new Date();//设置cookie时效性必须获取当前时间
nowDate.setFullYear(2023)
document.cookie  =`heigh=188;expires=${nowDate}`;
document.cookie  =`height=200;max-age=${1000}`;

删除cookie expires设置日期为过期日期 max-age设置负数

var nowDate1 =new Date();
nowDate1.setFullYear(2000)
document.cookie  =`heigh=188;expires=${nowDate1}`;
document.cookie  =`height=200;max-age=${-1}`;

修改cookie

document.cookie ="name=lisi"

cookie编码和加解密

编码

作用：解决数据传输时乱码问题
encodeURI 编码会自动编码中文汉字对于英文和数字来说不会编码，不会网址中符号进行编码
encodeURIComponent 编码会对网址中符号进行编码，用法和encodeURI 一样
encodeURI 编码

var  encondeStr =  encodeURI("abc123万元");
console.log(encondeStr);

decodeURI 解码
console.log(decodeURI(encondeStr));

加密

作用：解决数据的安全问题
base64加密
var base64Str = window.base64Encry.base64encode(需要加密的内容)
base64解密
var debase64Str = window.base64Encry.base64decode(需要解密的内容);
点击下载base64.js
md5加密是不可逆的但是可以通过一些在线网站查询
var md5Str = md5(加密内容);
点击下载md5.js