对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage
sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载
localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在。
局部存储器。它是html5新增的一个本地存储API,所谓localStorage就是一个小仓库的意思,它有5M的大小空间,存储在浏览器中,我们可以通过js来操纵localStorage。
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
优势与局限:
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
最近在做一个springboot+Themeleaf的电子商城项目,在这之间遇到了这么一个问题,就是在首页搜索时,怎么在搜索结果页获取到首页搜索框的输入值。这个问题困扰了我挺久时间的。开始的时候一直在用js的全局变量,结果不是变量没有define就是页面没有获取到数据。后面用了localStorage才终于解决了这个问题。
//搜索实现
function key()
{
//给value赋值
localStorage.value=$("#search_kw").val();
}
function search(){
var flag=0;
key();
//获取本地值
var keyword = localStorage["value"];
$.get("product/new.do?pageSize=12&pageNo=0" , function (data) {
$(data.data).each(function (index, item) {
if ((item.title.toUpperCase()).indexOf(keyword.toUpperCase())!=-1) {
flag=1;
window.location.href = '/mall/search.html';
}
});
if(!flag)
{
alert("无此商品,请选择其他商品");
}
});
}
function entersearch(event) {
var e = event;
if (e.keyCode == 13) { // enter 键
search();
}
}
function appendToPage1(div, data) {
//获取本地值
var keyword1=localStorage["value"];
$(data).each(function (index, item) {
if((item.title.toUpperCase()).indexOf(keyword1.toUpperCase())!=-1) {
var productDiv = $("");
var conetDiv = $("");
productDiv.append(conetDiv);
var imgdiv = $("">");
conetDiv.append(imgdiv);
var priceDiv = $("商城价:" + item.shopPrice +"¥"+ "");
conetDiv.append(priceDiv);
conetDiv.append($(""));
div.append(productDiv);
}
});
}
总结:
浏览器查看方法
进入开发者工具
选择 Application
在左侧 Storage 下 查看 Local Storage 和 Session Storage
sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'haha',
sex:'male',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
var storage=window.localStorage;
var data={
name:'haha',
sex:'male',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
//object
1、localStorage通过使用setItem(key,value)来设置元素以及值,如localStorage.setItem(“name”,”ljq”);
2、使用getItem(key)来获取元素值,如localStorage.getItem(“name”);
3、使用removeItem(key)清除key值,如localStorage.removeItem(“name”);
4、使用localStorage.clear()清除所有的key值;
5、使用localStorage.length可以获取本地存储key的个数;
6、按照序号读取本地存储变量的key值,使用localStorage.key(i)。
如果是使用IE浏览器的话,那么就要UserData来作为存储,localStorage的使用也是遵循同源策略的,所以不同的网站之间是不能共用相同的localStorage。
localStorage只支持string类型的存储。
官方推荐的是getItem\setItem这两种方法对其进行存取