1.1sessionStorage/localStorage存储方法:
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等,具体方法如下:
1.setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("name",
"TOM");
localStorage.setItem("password",
"12345");
2.getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var username = sessionStorage.getItem("name");
var pwd = localStorage.getItem("password");
3.removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("name");
localStorage.removeItem("password");
4.clear()清除缓存 key
用途:清除本地所有存储
用法:.clear()
代码示例:
sessionStorage.clear();
localStorage.clear();
1.2 cookie 存储方法:(需要 封装个 cookie.js)
cookie.js
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
// 取cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//删除cookie
function clearCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//代码示例
setCookie("name","张三");//存cookie
getCookie("name")//"张三" 取cookie
clearCookie("name")//删除kookie
拓展:页面与页面间
的 数据 传输 的几种方法【注意考虑:所存数据的 安全性】
1.3url 传值方法
假如 url 如下
http://192.168.31.46:8080/kingdun-app/h5/map.html?userId=0418wzF&phoneId=10101010
链接传值
获取 userId 和 phoneId
getQuery(val) {
const w = location.hash.indexOf('?');
const query = location.hash.substring(w + 1);
const vars = query.split('&');
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=');
if (pair[0] == val) {
return pair[1];
}
}
},
this.userId = this.getQuery('userId');
this.phoneId = this.getQuery('phoneId');
//取号组件工程截取
const myURL = new URL(location.href); //获取链接
this.search = myURL.search; //?后面内容
this.appName = myURL.searchParams.get('appName'); //获取名叫appName变量的值
console.log(myURL.search);
this.env = myURL.searchParams.get('env');
总结:
存储方式 | 作用与特性 | 存储数量及大小 | api |
---|---|---|---|
cookie | ● 存储用户信息,获取数据需要与服务器建立连接。 ● 可存储的数据有限,且依赖于服务器,无需请求服务器的数据尽量不要存放在cookie中,以免影响页面性能。 ● 可设置过期时间。 |
● 最好将cookie控制在4095B以内,超出的数据会被忽略。 ● IE6或更低版本最多存20个cookie; IE7及以上版本最多可以有50个;Firefox最多50个;chrome和Safari没有做硬性限制。 |
原生、$.cookie(详见上文) |
localStorage | ● 存储客户端信息,无需请求服务器。 ● 数据永久保存,除非用户手动清理客户端缓存。 ● 开发者可自行封装一个方法,设置失效时间。 |
5M左右,各浏览器的存储空间有差异。(感兴趣的同学可以自己试一下)。 | // 保存数据到 localStorage localStorage.setItem(‘key’, ‘value’); // 从 localStorage 获取数据 let data = localStorage.getItem(‘key’); // 从 localStorage 删除保存的数据 localStorage.removeItem(‘key’); // 从 localStorage 删除所有保存的数据 localStorage.clear(); |
sessionStorage | ● 存储客户端信息,无需请求服务器。 ● 数据保存在当前会话,刷新页面数据不会被清除,结束会话(关闭浏览器、关闭页面、跳转页面)数据失效。 |
同localStorage | // 保存数据到 sessionStorage sessionStorage.setItem(‘key’, ‘value’); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem(‘key’); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem(‘key’); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear(); |