localStorage、sessionStorage、cookie的使用

RancherLabs 发布于2019-08-21 18:34 / 1945人阅读

摘要：但同样要注意，这几个选项一定要旧保持一样。所以当的和中含有这个特殊字符时，需要对其进行额外编码，一般会用进行编码，读取时用进行解码当然也可以用或者

记录localStorage、sessionStorage和cookie的使用。

h5本地存储： 介绍

localStorage
永久保存不同页面和标签页可以共享关闭浏览器不会清除

sessionStorage
会话保存不同页面和标签页不能共享关闭浏览器会清除

存储内容：数组、图片、json、样式、脚本等只要能序列化为字符串的都可以
大小：每个域名5M
遇到的问题：SecurityError (DOM Exception 18): The operation is insecure.
需要在服务器状态下使用，如果以file://状态使用会DOM异常的错误

原型

clear()

getItem(key)

key(index)

length

removeItem(key)

setItem(key, data)

使用 setItem()

window.localStorage.setItem("name", "tanyue"); //设置名称为“name”的值   关闭浏览器不会消失
window.localStorage.setItem("email", "tanyuetz163.com"); //设置名称为“email”的值   关闭浏览器不会消失
window.sessionStorage.setItem("email", "tanyuetz163.com"); //获取名称为“email”的值   关闭浏览器消失

getItem()

var local = window.localStorage.getItem("name"); //获取name的值
var session = window.sessionStorage.getItem("email"); //获取email的值
console.log(local);
console.log(session);

遍历

var storage = window.localStorage;
    for (var i = 0, len = storage.length; i < len; i++) {
      var key = storage.key(i);
      var value = storage.getItem(key);
      console.log(key + "=" + value);
    }

removeItem()

window.localStorage.removeItem("name"); //移除name属性
window.sessionStorage.removeItem("email"); //移除email属性

clear()

window.localStorage.clear(); //清除localStorage

cookie

当网页要发送http请求时，浏览器会首先检查是否有相应的cookie,有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动添加cookie,因此身份验证信息会很适合放置在cookie中

大小：
每个个域名下大小为4k,每个域名下数量最多为20个

设置cokie:
`"key=name; expires=Thu, 25 Feb 2017 04:18:00 GMT;
domain=xxx.xxx.com; path=/; secure; HttpOnly"`(属性之间用分号和空格隔开)

方法：

document.cookie = "name=Jonh; age=12; class=111";
//不能通过这种方式设置多个cookie

//只能通过这种多次添加的方式设置cookie
document.cookie = "name=abc";
document.cookie = "age=22";
//修改cookie  重新赋值
document.cookie = "class=222";
//删除删除 cookie
//删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = "name=Jonh; expires=" + date.toGMTString();
//cookie编码
// cookie其实是个字符串，但这个字符串中逗号、分号、空格被当做了特殊符号。所以当cookie的 key 和 value 中含有这3个特殊字符时，需要对其进行额外编码，一般会用escape进行编码，读取时用unescape进行解码；当然也可以用encodeURIComponent/decodeURIComponent或者encodeURI/decodeURI

混合云专线服务 cookie的使用 localstorage使用 cookie使用 cookie如何使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90605.html

详说 Cookie, LocalStorage 与 SessionStorage

摘要：顾名思义，确实非常小，它的大小限制为左右，是网景公司的前雇员在年月的发明。是标准中新加入的技术，它并不是什么划时代的新东西。特性与的接口类似，但保存数据的生命周期与不同。但当页面关闭后，中的数据就会被清空。本文最初发布于我的个人博客：咀嚼之味最近在找暑期实习，其中百度、网易游戏、阿里的面试都问到一些关于HTML5的东西，问题大多是这样开头的：你用过什么HTML5的技术呀？...

endless_road 2019-08-21 10:31 评论0 收藏0
cookie、Sessionstorage、Localstorage快速上手

摘要：快速上手先说区别数据大小不能超过。可以在后端设置修改，数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。默认情况下，属于当前页面。 cookie、Sessionstorage、Localstorage快速上手先说区别 cookie: 数据大小不能超过4KB。不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，...

duan199226 2019-08-20 17:49 评论0 收藏0
localStorage、sessionStorage、Cookie的区别及用法

摘要：的区别及用法是本地存储，存储在客户端，包括和。仅在当前会话下有效，关闭页面或浏览器后被清除。源生接口可以接受，亦可再次封装来对和有更好的支持。但需要程序员自己封装，源生的接口不友好。每个最多只能有条，每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 评论0 收藏0
cookie、Sessionstorage、Localstorage快速上手

摘要：快速上手先说区别数据大小不能超过。可以在后端设置修改，数据仅在本地浏览器保存。数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。默认情况下，属于当前页面。 cookie、Sessionstorage、Localstorage快速上手先说区别 cookie: 数据大小不能超过4KB。不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，...

Galence 2019-08-20 17:49 评论0 收藏0