web本地存储（localStorage、sessionStorage）前端数据库总结

对浏览器来说，使用 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 = $("<div class='layui-col-md3 layui-col-xs6'></div>");
            var conetDiv = $("<div class='card layui-anim layui-anim-scale' style='height:300px'></div>");
            productDiv.append(conetDiv);
            var imgdiv = $("<div class='product_image'><img src=" + item.image + "></div>");
            conetDiv.append(imgdiv);
            var priceDiv = $("<div style='text-align: left;'>商城价：<span class='price1'>" + item.shopPrice +"￥"+ "</span></div>");
            conetDiv.append(priceDiv);
            conetDiv.append($("<div class='product_title' style='height:50px'><a href='/mall/product/get.html?id=" + item.id + "'>" + item.title + "</a></div>"));
            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这两种方法对其进行存取

web本地存储（localStorage、sessionStorage）前端数据库总结

猜你喜欢