h5的本地存储——sessionStorage,localStorage

最新推荐文章于 2022-11-24 16:47:13 发布

会做饭的技术男

最新推荐文章于 2022-11-24 16:47:13 发布

阅读量131

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1ibjih01ikj&title=h5%E7%9A%84%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E2%80%94%E2%80%94sessionStorage%2ClocalStorage

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，localStorage和sessionStorage都是本地存储。

Cookie会在每次发送HTTP请求时附加到

Cookie

头字段，服务器以此得知用户所处的状态。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

sessionStorage是会话型的，就是说如果你关闭了浏览器，它的数据就会被删除掉。

localStorage是持久型的，不存在过期这个说法，除非你手动删除。

手动引用一下 http://harttle.com/2015/08/16/localstorage-sessionstorage-cookie.html 的链接

引用内容如下：

LocalStorage/SessionStorage提供的存储也是基于字符串的键值对。可以通过

setItem

，

getItem

来访问其中的存储项：

localStorage.clear();
localStorage.setItem('key', 'value'); localStorage.getItem('key'); // => 'value' localStorage.removeItem('key');

因为它只能存储字符串，要存JSON只能序列化为字符串：

var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage var retrievedObject = localStorage.getItem('testObject'); console.log('retrievedObject: ', JSON.parse(retrievedObject));