jQuery中localStorage及sessionStorage的使用
jQuery中localStorage及sessionStorage的使用
localStorage、sessionStorage理解
localStorage：在HTML5中，新加入的一个l特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
sessionStorage： 也是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
localStorage与sessionStorage的区别
sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样。
localStorage的优势与局限
localStorage的优势
- localStorage拓展了cookie的4K限制
- localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
- 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
- localStorage在浏览器的隐私模式下面是不可读取的
- localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
- localStorage不能被爬虫抓取到
sessionStorage的特点
同源策略限制：若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)单标签页限制：sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。只在本地存储：seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。存储方式：seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。- 支持sessionStorage的浏览器最小版本：
IE8、Chrome 5。 - 适合场景 ：sessionStorage 非常适合
SPA(单页应用程序)，可以方便在各业务模块进行传值。
localStorage的使用
1.清空localStorage
localStorage.clear() // undefined
console.log(localStorage ) // Storage {length: 0}
2.存储数据
localStorage.setItem("name","builder") //存储名字为name值为builder的变量
localStorage.name = "builder"; // 等价于上面的命令
console.log(localStorage ) // Storage {name: "builder", length: 1}
3.读取数据
localStorage.getItem("name") //builder,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "builder"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));}
4.删除某个变量
localStorage.removeItem("name"); //undefined
console.log(localStorage )// Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了
5.检查localStorage里是否保存某个变量
console.log(localStorage.hasOwnProperty('name')) // true
console.log(localStorage.hasOwnProperty('sex')) // false
6.将数组转为本地字符串
var arr = ['1','2','3']; // ["1","2","3"]
localStorage.arr = arr //["1","2","3"]
console.log(localStorage.arr.toLocaleString()); // "1,2,3"
7.将JSON存储到localStorage里
var stu = {a: {name: "张三",grade: 1},b: {name: "李四",grade: 2}}
stu = JSON.stringify(stu); //将JSON转为字符串存到变量里
console.log(stu);
localStorage.setItem("stu",stu);//将变量存到localStorage里
var newStu = localStorage.getItem("stu");
newStu = JSON.parse(stu); //转为JSON
console.log(newStu); // 打印出原先对象
localStorage页面传值案例
a页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>localStorage页面传值案例——a页面</title><style>.demo{color:red;}.btn{border-radius: 10px;height:30px;width:150px;border: 0;background-color: mediumpurple;color:#fff;}</style></head><body><h2 class="demo">a页面</h2><div id="a"><p style="color: #fff;background:coral;width: 150px;line-height: 60px;text-align: center;">来自a页面</p></div><button class="btn">点击加载新页面</button></body><script src="../js/jquery.js"></script><script type="text/javascript">$(function(){$('.btn').click(function(){var a = $("#a").html();// window.open("b.html","_blank");window.location.href="b.html";localStorage.setItem('name', a);})})</script>
</html>
b页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>localStorage页面传值案例——b页面</title></head><body><h2>b页面</h2><div id="b"></div></body><script src="../js/jquery.js"></script><script type="text/javascript">var str = localStorage.getItem('name');$('#b').append(str)</script>
</html>
sessionStorage的使用
// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
注意：具体的操作与localStorage基本一致，就不赘述了。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！