草庐IT

cookies sessionStorage和localstorage

等级7 2023-03-28 原文

相同点：都存储在客户端

不同点：

（1）存储大小

· cookie数据大小不能超过4k。

· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

（2）有效时间

· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

· sessionStorage 数据在当前浏览器窗口关闭后自动删除。

· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

（3）数据与服务器之间的交互方式

· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

获取cookie的值

//获取cookie字符串

var strCookie= document.cookie;

//将多cookie切割为多个名/值对

var arrCookie= strCookie.split("; ");

var userId;

//遍历cookie数组，处理每个cookie对

for (var i= 0; i< arrCookie.length; i++) {

var arr= arrCookie[i].split("=");

//找到名称为userId的cookie，并返回它的值

if ("userId"== arr[0]) {

this.userId= arr[1];

break;

}

}

sessionStorag

（简单的说就存储在浏览器页面会话中，页面关闭则消失）

sessionStorage的特点是，当用户打开一个标签页，实际上就是建立了一个session会话，在这个标签页里，url发生跳转，sessionStorage实际上还是保存着，并不会消失，当标签页关闭的时候，数据才会消失。

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

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中的键值对会被清空

localStorage****拿到的是字符串****,需要将获取到的目标转换一下

console.log("name",JSON.parse(localStorage.getItem('name')).name)

localStorage****存储是字符串格式需要转换****(不需要this)

localStorage.setItem('name',JSON.stringify(msg))
sessionStoragelocalstoragelocalStoragestrongcookie

有关cookies sessionStorage和localstorage的更多相关文章

  1. javascript - HTML5 中的 localStorage 是如何工作的？ - 2

    HTML5中的localStorage是如何工作的？我搜索了每个地方(甚至在SO中)以找到localStorage的实际内部逻辑，但我最终访问了一些使用localStorage的示例。我没有找到任何有用的问题答案。有人可以给我发一个链接或解释一下localStorage的工作原理吗 最佳答案 我不一定确定您在这里寻找什么...但是localStorage的内部实现将是特定于浏览器的。我不会指望任何两个浏览器在内部以相同的方式实现该功能(就像所有东西一样，实现和性能会给每个浏览器带来不同的优势)。如果您真的很感兴趣，我建议您下载Chr

  2. javascript - 如何为与 www 相同的域创建 localStorage。同时还是下次访问？ - 2

    我创建了一个JS文件，并将其放置在我以外的其他网页中。所以我的是domain-1.com，我把它放到domain-2.com和domain-3.com这个JS包含jsonp，我成功地将一些数据从他们的页面保存到我的数据库中。此外，我创建了一些cookie并将值保存到本地存储。问题是，当访问者访问domain-2.com并且明天访问www.domain-2.com时，他们将具有不同的值，因为os是www.我希望这个值在整个www.与否，也许同时，我不知道一个适用的想法。我最好同时为www传递值。并且没有www.如何做到这一点？我只给他们提供一个JS外部链接。如果我也放置一个iframe就

  3. javascript - 如何更新 localStorage 项目？ - 2

    我遇到缓存对象与正确数据不相似的问题，所以我想我可以将最新版本推送到浏览器缓存，这将解决我的问题。如何使用新对象更新localStorage？因此，如果我有一个Controller，它会更新评估。我怎样才能将该评估对象推送到localStorage？ 最佳答案 要使用原生JavaScript做到这一点，您需要执行如下操作:localStorage.setItem('itemKey',JSON.stringify(yourObject));varitem=JSON.parse(localStorage.getItem('itemKey

  4. javascript - JSDom 11.12.0 - 如何模拟 localStorage？ - 2

    自从最新版本的JSDom以来，我无法再模拟localStorage。我试过以下方法:Object.defineProperty(window,'localStorage',{value:LocalStorageMock})window.localStorage=LocalStorageMock;jest.spyOn(window.localStorage,'setItem')任何这些方法都不适合我，我总是得到原始的localStorage。 最佳答案 setItemSpy=jest.spyOn(Storage.prototype,'

  5. javascript - localStorage Size Limits...有哪些选项？ - 2

    我计划在我的一个项目中使用持久性localStorage，我发现大小限制为5MB(chrome)。我搜索了其他实现相同功能的框架，例如Mootools、Dojo、Lawnchair，但我找不到它们的大小限制。有谁知道这些文件的大小限制是多少。如果不是上面已经提到的选项，还有哪些我可以使用的其他选项。 最佳答案 localstorage限制与javascript框架无关，而是与您使用的浏览器相关。Currentlyspecsaresuggestingtolimitthestoragespaceto5MB这是现代浏览器上可用的最大空间在

  6. javascript - 自定义 localStorage js 函数未在 Chrome 中运行 - 2

    我正在尝试做的事情:在localStorage之上创建我自己的存储API，以便在我自己的代码中更容易使用。为什么？所以它有一个API供我使用，以后可以扩展。系统:Chrome版本:版本22.0.1229.94mJSFiddle:http://jsfiddle.net/ttback/kr88W/错误fiddle将在控制台中触发错误:TypeError:对象的属性'localStorageSave'#不是函数这适用于IE8和Firefox16.0.1，所以我想知道我是否遗漏了什么或者是Chrome错误。代码:JSfunctionnotworkinginChromevarlocalStora

  7. javascript - 如何删除 localStorage 中的特定项目/对象？ - 2

    原来我的localStorage["items"]将我的JSON存储为字符串。"["{\"itemId\":1,\"itemName\":\"item1\"}","{\"itemId\":2,\"itemName\":\"item2\"}","{\"\":3,\"itemName\":\"item3\"}",]"这是我JSON.parse(localStorage["items"])时的样子:["{"itemId":1,"itemName":"item1"}","{"itemId":2,"itemName":"item2"}""{"itemId":3,"itemName":"item3

  8. javascript - 如何在 react.js 中监听 localstorage - 2

    我在使用从本地存储中的数组获取数据的组件时遇到问题。它在页面加载时获取初始数据，但是当localstorage更改时如何更新？importReact,{Component}from'react';classMovieListextendsComponent{constructor(props){super(props)this.state={filmList:[]}}componentWillMount(){varfilm=[],keys=Object.keys(localStorage),i=keys.length;while(i--){film.push(localStorage.

  9. javascript - 如何中断 localStorage 更改 - 2

    我正在寻找一种方法来中断任何localStorage更改。我发现有一些神秘的条目，我不知道它们来自哪里，我希望调试器中断任何更改，以便我可以检查代码。这包括:localStorage.someKey=someValue;localStorage["someKey"]=someValue;localStorage.setItem("someKey",someValue);因为有很多方法可以改变/创建localStorage中的条目，简单地覆盖.setItem并执行debugger;是行不通的。任何想法表示赞赏。 最佳答案 不是在原生l

  10. javascript - 如何在 phonegap 应用程序中使用存储在 localStorage 中的 json 提要？ - 2

    这是我在做的，获取对我的网络服务器的请求，响应在json中。使用jquery模板在我的应用程序中呈现该回调数据。非常简单，就像一个魅力。这就是问题所在:我想在本地存储一些数据，这样我的应用程序就不必每次都从服务器获取它(3g很慢，每次交易都会损害我的用户体验...)。所以这是我尝试过的:$.ajax({url:app_domain+'/pages/home.json',type:'get',datatype:'json',data:{mobile:"1"},async:true,cache:false,success:function(data){//storelocallylocal

随机推荐