1.1sessionStorage/localStorage存储方法:

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等,具体方法如下:

1.setItem存储value

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

  1. sessionStorage.setItem("name",
  2. "TOM");
  3. localStorage.setItem("password",
  4. "12345");

2.getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

  1. var username = sessionStorage.getItem("name");
  2. var pwd = localStorage.getItem("password");

3.removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

  1. sessionStorage.removeItem("name");
  2. localStorage.removeItem("password");

4.clear()清除缓存 key

用途:清除本地所有存储
用法:.clear()
代码示例:

  1. sessionStorage.clear();
  2. localStorage.clear();

1.2 cookie 存储方法:(需要 封装个 cookie.js)

  1. cookie.js
  2. //JS操作cookies方法!
  3. //写cookies
  4. function setCookie(name,value)
  5. {
  6. var Days = 30;
  7. var exp = new Date();
  8. exp.setTime(exp.getTime() + Days*24*60*60*1000);
  9. document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
  10. }
  11. // 取cookie
  12. function getCookie(name)
  13. {
  14. var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
  15. if(arr=document.cookie.match(reg))
  16. return unescape(arr[2]);
  17. else
  18. return null;
  19. }
  20. //删除cookie
  21. function clearCookie(name)
  22. {
  23. var exp = new Date();
  24. exp.setTime(exp.getTime() - 1);
  25. var cval=getCookie(name);
  26. if(cval!=null)
  27. document.cookie= name + "="+cval+";expires="+exp.toGMTString();
  28. }
  29. //代码示例
  30. setCookie("name","张三");//存cookie
  31. getCookie("name")//"张三" 取cookie
  32. clearCookie("name")//删除kookie

拓展:页面与页面间
的 数据 传输 的几种方法【注意考虑:所存数据的 安全性】

1.3url 传值方法

假如 url 如下
http://192.168.31.46:8080/kingdun-app/h5/map.html?userId=0418wzF&phoneId=10101010
链接传值

  1. 获取 userId phoneId
  2. getQuery(val) {
  3. const w = location.hash.indexOf('?');
  4. const query = location.hash.substring(w + 1);
  5. const vars = query.split('&');
  6. for (let i = 0; i < vars.length; i++) {
  7. const pair = vars[i].split('=');
  8. if (pair[0] == val) {
  9. return pair[1];
  10. }
  11. }
  12. },
  13. this.userId = this.getQuery('userId');
  14. this.phoneId = this.getQuery('phoneId');
  15. //取号组件工程截取
  16. const myURL = new URL(location.href); //获取链接
  17. this.search = myURL.search; //?后面内容
  18. this.appName = myURL.searchParams.get('appName'); //获取名叫appName变量的值
  19. console.log(myURL.search);
  20. 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();