localStorage、sessionStorage、session和cookie的技术优缺点是什么,什么时候使用其中一个而不是另一个?
当前回答
这些是JavaScript中“window”对象的属性,就像document是window对象的属性之一,它包含DOM对象。
Session Storage属性为每个给定的源维护一个单独的存储区域,在页面会话期间可用,即只要浏览器打开,包括页面重新加载和恢复。
本地存储做同样的事情,但即使浏览器关闭并重新打开也会持续存在。
您可以通过以下方式设置和检索已存储数据:
sessionStorage.setItem('key', 'value');
var data = sessionStorage.getItem('key');
localStorage也是如此。
其他回答
好吧,LocalStorage,因为它被称为你的浏览器的本地存储,它可以节省高达10MB, SessionStorage也一样,但正如它的名字所说,它是基于会话的,关闭浏览器后将被删除,也可以节省比LocalStorage更少的数据,比如最多5MB,但cookie是非常小的数据存储在你的浏览器中,可以节省4KB,可以通过服务器或浏览器访问…
我还创建了下面的图像来显示差异:
这里是一个快速的回顾和简单而快速的理解
来自freecodecamp的Beau Carnes教练
LocalStorage:
Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. Available size is 5MB which considerably more space to work with than a typical 4KB cookie. The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server. The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site. It works on same-origin policy. So, data stored will only be available on the same origin.
饼干:
我们可以为每个cookie设置过期时间 4K的限制适用于整个cookie,包括名称、值、有效期等。为了支持大多数浏览器,请将名称保持在4000字节以下,并且cookie的总体大小保持在4093字节以下。 对于每个HTTP请求(HTML、图像、JavaScript、CSS等),数据都被发送回服务器,这增加了客户端和服务器之间的流量。
sessionStorage:
It is similar to localStorage. Changes are only available per window (or tab in browsers like Chrome and Firefox). Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted The data is available only inside the window/tab in which it was set. The data is not persistent i.e. it will be lost once the window/tab is closed. Like localStorage, it works on same-origin policy. So, data stored will only be available on the same origin.
确切的用例-
如果您希望页面始终保存一些非机密的数据,那么可以使用localStorage。 如果服务器需要知道一些信息,比如身份验证密钥,您应该使用cookie来存储它们。 sessionStorage可用于存储界面的状态,即,无论何时访问一个页面,定制它,访问另一个页面并返回到同一页面,您都希望显示用户如何定制该页面。这是sessionStorage的一个很好的用例。
这些是JavaScript中“window”对象的属性,就像document是window对象的属性之一,它包含DOM对象。
Session Storage属性为每个给定的源维护一个单独的存储区域,在页面会话期间可用,即只要浏览器打开,包括页面重新加载和恢复。
本地存储做同样的事情,但即使浏览器关闭并重新打开也会持续存在。
您可以通过以下方式设置和检索已存储数据:
sessionStorage.setItem('key', 'value');
var data = sessionStorage.getItem('key');
localStorage也是如此。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击