localStorage，sessionStorage那些事儿-白红宇

localStorage，sessionStorage那些事儿

阅读量：6829 次

发布时间：2019-06-26

本文共 3862 字，大约阅读时间需要 12 分钟。

1、介绍

如W3Cschool介绍，localStorage和sessionStorage是H5新加的特性。

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

localStorage

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

而且解决了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不能被爬虫抓取到

sessionStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage和sessionStorage的存储，取值，删除等操作。

sessionStorage和localStorage用法一样。

值得注意的是，我在本地测试的时候，chrome浏览器第一打开窗口的时候，浏览器的localStorage和sessionStorage有内容，我刷新就看不到内容了，但是存的东西确实存在的，能获取到，而在火狐浏览器里面不会出现这种情况，刷新网页内容不会丢，有毒了。

跪求（膝盖奉上）指点。

1 　　　　　　　// var localStorage = window.localStorage; 2             // var sessionStorage = window.sessionStorage; 3             //window对象的话，前面的window省略了哦 4             //存localStorage 5             localStorage.setItem('a', '1'); 6             localStorage.setItem('b', '2'); 7             localStorage.setItem('c', '3'); 8             localStorage.setItem('d', '4'); 9             //设置存储，名为a，值为510             localStorage.e = 5;11             //获取全部键值，已经长度12             console.log(localStorage.valueOf());13             //按key进行取value值的三种方法14             console.log(localStorage.getItem('a'));15             console.log(localStorage.b);16             console.log(localStorage['c']);17             //获得数据的长度18             console.log(localStorage.length);19             //获得第N个数据的key名称20             console.log(localStorage.key(1));21             //删除单个key的value值22             localStorage.removeItem('a');23             //删除全部数据的value值24             localStorage.clear();25 26             //sessionStorage和localStorage27             sessionStorage.setItem('aa', '11');28             sessionStorage.setItem('bb', '22');29             sessionStorage.setItem('cc', '33');30             //获取全部键值，已经长度31             console.log(sessionStorage.valueOf());32             //按key进行取value值的三种方法33             console.log(sessionStorage.getItem('aa'));34             console.log(sessionStorage.bb);35             console.log(sessionStorage['cc']);36             //获得数据的长度37             console.log(sessionStorage.length);38             //获得第N个数据的key名称39             console.log(sessionStorage.key(1));40             //删除单个key的value值41             sessionStorage.removeItem('aa');42             //删除全部数据的value值43             sessionStorage.clear();

还要注意的是由于 localStorage 只能保存字符串内容，所以这里要先把对象转换成 JSON 字符串

1 　　　　　　　　// json对象 2             // 由于 localStorage 只能保存字符串内容，所以这里要先把对象转换成 JSON 字符串 3             //以上即为localStorage调用的方法。下面介绍存储JSON对象的方法。   4             var students = { 5                     游晓伟: { 6                         name: "游晓伟", 7                         gender: "女", 8                         age: 22 9                     },10 11                     张宁: {12                         name: "张宁",13                         gender: "男",14                         age: 2215                     }16 17                 } //要存储的JSON对象  18 19 20             students = JSON.stringify(students); //将JSON对象转化成字符串  21 22             localStorage.setItem("students", students); //用localStorage保存转化好的的字符串  23             var studentsVslue = localStorage.getItem("students");24             console.log(studentsVslue); //取回students字符串 25 26             studentsVslue = JSON.parse(studentsVslue); //把字符串转换成JSON对象  27             console.log(studentsVslue);

暂时就这么多，欢迎补充提问。

转载于:https://www.cnblogs.com/youxiaowei/p/6945937.html

你可能感兴趣的文章