本地存储
1 sessionStorage 会话储存, 生命周期 浏览器一关闭 就不存在
2 localStorage 永久储存 除非手动删除
3 一些 api
——————— setItem(“key”,val) 设置值 , getItem(key) 获 取,removeitem(key) 删除值 clear 清空
4 储存的数据类型
1 存储的数据类型是简单类型 ==转换为字符串格式
2 当存的 是复杂类型时 需要先转换成 json字符串 再进行存储
使用 JSON.stringify(obj)
3 取数据(复杂类型)
使用 JSON.parse() 转换成对象
cookie :
cookie是浏览器里面能永久存储的一种数据。cookie由服务器生成，发送给浏览器进行存储
token:
则是身份验证的方式,登录成功之后,后台会自动发送身份信息等字符串.数据回来,token包含其中 会有唯一的id (令牌号).访问一些页面需要自己带上token (比如购物网站中的购物车页面等)
以上是三种的区别:
实例:
//编写购物车添加时 aip 中 会有规定token 以何种方式传入
//比如 此时的就是 访问有权限的路径必须把 token 放置到 http 头中 (ajax的headers中)
//1 添加物品的各样数据 与 判断是否 存在 有效 token
$.ajax({
url:"my/cart/add",
type:"post",
data:{info:JSON.stringify(obj)},
headers:{ //token 根据文档要求使用请求头进行传输
Authorization:token
},
success:function(res){
//返回判断
if(res.meta.status==401){
mui.toast("未登录");
//为了跳回当前页面 进行传输 在登录页面获取 跳转
sessionStorage.setItem("pageName", location.href);
setTimeout(function(){
location.href="/page/login.html";
},1000)
}else if(res.meta.status==200){ //成功
/* 提高用户体验 成功弹出确认框 跳转到购物车页面 或者留在当前页面 */
/* mui.confirm 插件 确认框 (标题,中间文字,["跳转","取消"],function(形参){回调函数}) */
mui.confirm("是否跳转到购物车页面","添加成功",["跳转","取消"],function(etype){
if(etype.index==0){
/* 一秒之后跳转到购物车 */
setTimeout(function(){
location.href="/page/shoppCart.html";
},1000)
}else if(etype.index==1){
//不跳转 留在当前页面
}
})
}
}
})
登录页面 进行判断数据合法之后 传输数据 即 用户名与密码 进行请求数据
$.post("login",{username:phone,password:password},function(res){
if(res.meta.status==200){
/* 获取 token 将token 数据用 永久存储 存储起来 */
localStorage.setItem("userinfo",JSON.stringify(res.data));
// console.log(res);
// debugger
mui.toast(res.meta.msg);
console.log(sessionStorage.getItem("pageName"));
setInterval(function(){
//当我们提示需要登录之后,跳转到登录页面,登录之后还需要停留在添加购物车的页面
// 而不是直接跳转到 首页此时 我们需要用到 sessionStorage.setItem
//将本页面的url 作为 sessionStorage 的值存储起来方便 登录页面获取判断
// 判断有没有来源页面 没有再去跳转到首页
var pageName = sessionStorage.getItem("pageName");
console.log(pageName);
if (pageName) {
location.href = pageName;
} else {
// location.href="/index.html";
}
},2000)
}else{
mui.toast(res.meta.msg);
}
})其中关键就只是两句代码:
设置:
将token 数据用 永久存储 存储起来
localStorage.setItem(“userinfo”,JSON.stringify(res.data));
获取验证:
var token=JSON.parse(localStorage.getItem(“userinfo”)).token;
其中还有些小坑 …..