JavaScript—本地存储

63 阅读2分钟

cookie

cookie是一种存储于访问者计算机中的变量,由浏览器负责保存在电脑本地,cookie是浏览器提供的一种机制,可以有java script(JS)进行控制(设置、读取、删除)

cookie的优点:

实现跨页面全局变量:

  • cookie可以跨越同一个域名下的多个网页。
  • 方便用户登录:可以将登录信息存储在cookie中,省去每次登录都需要输入用户名和密码的麻烦。

cookie的缺点:

  • 存储信息泄露风险:cookie中不适合存储敏感信息,如密码。经许可(或不在Google的情况下),第三方可以访问这些cookie存储的信息。
  • 容易造成安全风险:cookie是以明文形式存储,可能会造成安全风险,因为任何人都可以打开并篡改cookie。
  • 容易被黑客入侵和修改:cookie容易在客户端被发现意味着它们很容易被黑客入侵和修改

image.png

cookie和sessionStorage 的区别:

  • 保持状态: cookie保存在浏览器端, sessionStorage保存在服务器端
  • 存储空间的大小: cookie:单个cookie保存的数据不能超过4kb; sessionStorage大小没有限制。
  • sessionStorage的安全性大于cookie

sessionStorage

sessionStorage储存

  • sessionStorage.setItem("key", "value");

getItem获取值

  • var value = sessionStorage.getItem("key");

removeItem删除值

  • sessionStorage.removeItem("key");

clear清除所有

  • sessionStorage.clear();

localStorage和sessionStorage的区别:

localStorage和sessionStorage不会自动把数据发送给服务器,仅保存在本地。 localStorage和sessionStorage和cookie都保存的浏览器端。 localStorage和sessionStorage存储空间都比cookie的存储空间更大。可以达到5MB或更大。 sessionStorage:临时存储。仅在当前浏览器窗口关闭之前有效。在同源浏览器其他窗口无效,在其他浏览器无效。 localStorage:永久存储。在所有同源窗口中都共享。 cookie:自定义过期时间。在所有同源窗口中都共享。

localStorage

localStorage储存

  • localStorage.setItem("key", "value");

getItem获取值

  • var value = localStorage.getItem("key");

removeItem删除值

  • localStorage.removeItem("key");

clear清除所有

  • localStorage.clear();